שאלה לגבי תרגול מחלקות es6

שאלה של תלמיד לגבי תרגול מחלקות ES6

מה הבעיה עם הקוד הבא? למה זה לא עובד?


class LightBlue{
    
    constructor(){
        this.panel = document.querySelector('#panel');
        this.btn = document.querySelector('button');
        
        this.btn.addEventListener('click',this.checkStatus);
    }

    on(){
        this.panel.classList.add('activ');

    }
    off(){
        this.panel.classList.remove('activ');
    }

    

    checkStatus(){
        
        var ch = this.panel.classList.contains('activ');
        console.log(ch);
        if(ch===true){
            this.off();
        }
        else{
            this.on();
            
        }
        
    }
}

var p = new LightBlue();

וקובץ ה HTML:


<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
    </head>
    <body>
        <style>
        #panel{
            height:100px;
            border:1px solid black;
           

            
        }
        .activ{
            background-color: yellow;
        }
        </style>
      
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="panel" class="activ"></div>
        <button>click</button>
        <script src="demo2.js" async defer></script>
        
    </body>
</html>

הי,

ניסיתי להפעיל וקיבלתי את השגיאה הבאה:

Uncaught TypeError: Cannot read property 'classList' of undefined
    at HTMLButtonElement.checkStatus (pen.js:23)

הסיבה מוסברת בשיעור ״המשתנה this בקוד טיפול באירוע״ שנמצא כאן:
https://www.tocode.co.il/bundles/html5-web-development/lessons/bind

ובכלל ממליץ לעבור על שיעורים 12-35 בקורס Fornt End Development לפני שאתה ממשיך עם קורס ES6 כאן, כי הרבה מהדברים כאן בנויים על העקרונות של הדברים שבאו לפניהם

בהצלחה
ינון