I'm making a Simon game, where there are 4 quarter circles all with class name 'colorButton': red, yellow blue and green.

I'd like it so that when it's the computer turn, all pointer events to the 4 colored circles are disabled so you can't click on them.

In my code i use:

const colorButtons = document.getElementsByClassName('colorButton');

      colorButtons.style.pointerEvents = 'none';

But I get this console error:

Uncaught TypeError: Cannot set property 'pointerEvents' of undefined

    at App.computerMove (http://localhost:8080/bundle.js:14010:42)

    at App.startGame (http://localhost:8080/bundle.js:13997:14)

Am I doing something wrong here?

Entire code for reference:

import React, { Component } from 'react';



import ColorButton from './colorbutton';



export default class App extends Component {

  constructor(props) {

    super(props);

    this.state = {

      powerOn: false,

      start: false,

      myTurn: false,

      compMoves: ['red', 'yellow', 'blue', 'green'],

      myMoves: [],

      count: null

    };

    this.colors = ['green', 'red', 'yellow', 'blue'];

    this.powerOn = this.powerOn.bind(this);

    this.startGame = this.startGame.bind(this);

    this.highlightBtn = this.highlightBtn.bind(this);

    this.computerMove = this.computerMove.bind(this);

  }



  startGame() {

    const { powerOn } = this.state;

    if (powerOn) {

      this.setState({ start: true });

      this.computerMove();

    }

  }



  computerMove(){

    if (!this.state.myTurn) {

      const randNum = Math.floor(Math.random() * 4);

      const randColor = this.colors[randNum];

      const count = this.state.count;



      const colorButtons = document.getElementsByClassName('colorButton');

      colorButtons.style.pointerEvents = 'none';



      const compMoves = this.state.compMoves.slice();

      compMoves.push(randColor);



      var i=0;

      const repeatMoves = setInterval(() => {

        this.highlightBtn(compMoves[i]);

        i++;

        if (i >= compMoves.length) {

          clearInterval(repeatMoves);

        }

      }, 1000);



      this.setState({

        compMoves: compMoves,

        myTurn: true,

        count: count + 1

      });

    }

  }



  highlightBtn(color) {

    const audio = document.getElementById(color+'Sound');

    audio.play();



    const selectColor = document.getElementById(color);

    selectColor.style.opacity = 0.5;

    setTimeout(() =>{ selectColor.style.opacity = 1}, 200);

  }



  powerOn(event) {

    const { powerOn } = this.state;

    if (!powerOn) { this.setState({ powerOn: true }) }

    else { this.setState({ powerOn: false }) }

  }



  render() {

    console.log('moves:', this.state.compMoves);

    const { count } = this.state;



    return(

      <div className='container'>

        <div className='outer-circle'>

          <ColorButton

            color='green'

            handleClick={() => this.highlightBtn('green')}

          />

          <ColorButton

            color='red'

            handleClick={() => this.highlightBtn('red')}

           />

          <ColorButton

            color='yellow'

            handleClick={() => this.highlightBtn('yellow')}

          />

          <ColorButton

            color='blue'

            handleClick={() => this.highlightBtn('blue')}

          />

          <div className='inner-circle'>

            <h2>Simon®</h2>

            <div className='count-box'>

              <div className='count-display'>{count ? count : '--'}</div>

              <div className='small-text'>Count</div>

            </div>

          </div>

        </div>

        <div className='controls'>

          <div className='power-box'>

            <div className='power-text'>OFF</div>

            <label className=switch>

              <input type=checkbox onChange={this.powerOn}/>

              <div className=slider round></div>

            </label>

            <div className='power-text'>ON</div>

          </div>

          <div className='buttons'>

            <div className='start-box'>

              <div className='start-button' onClick={this.startGame}></div>

              <div className='small-text'>Start</div>

            </div>

            <div className='strict-box'>

              <div className='strict-button'></div>

              <div className='small-text'>Strict</div>

            </div>

          </div>

        </div>



        <p className='footer'>

          Source code on <a href='https://github.com/drhectapus/react-simon-game'>Github</a>

        </p>

      </div>

    )

  }

}