I'm trying to use JavaScript class architecture in combination with addEventListener such that I can define a series of class methods once, which will be applied to all appropriate HTML and/or CSS objects. Below is an example with ONLY one circle, which should toggles red or blue when clicked. Unfortunately, as is, the class does architecture is unable to properly communicate with the DOM.


我想按原样进行编码,以便单击时圆圈会更改颜色。 (此外,不使用类体系结构时的代码DID函数。如果有用,可以添加它。)

<meta name="viewport" content="width=device-width, initial-scale=1">
.circle {
  height: 50px;
  width: 50px;
  background-color: #555;
  border-radius: 50%;

<h2>Circle CSS</h2>
<div class="circle"></div>

class GameObject{
    this.shape = shape;
    this.clicks = 0;
      this.clicks += 1
      if (this.clicks % 2 == 1){ = 'red';
      }else{ = 'blue';

let shape = document.querySelector('.circle')
let s = new GameObject(shape);



Also, the following questions/answers went above my head, though they are related: Javascript Class & EventListener Dealing with Scope in Object methods containing 'this' keyword called by Event Listeners

Edit: I took advice from comment and added clickEvent() into this constructor. However, the following error was triggered:

Uncaught TypeError: Cannot read property 'style' of undefined
    at HTMLDivElement.<anonymous> (circle.html:31)