Buttons not working, xxxx.addEventListener is not a function. Please help !
Published: 2022-07-28 11:08:26

I created a 16 x 16 grid where I can etch a sketch on that grid. It's working with the default colour that I use. When I try adding buttons to change colours to sketch. I can't seem to make it work. I've tried various methods and writing it with various ways but again and again I failed. I want it when I click on the buttons, it changes colour when I sketch on it. I'll include below the previous code that it's working and one of the ways that I tried to make it work. Can you please have a look on my code ?


    let container = document.querySelector('.container');
    let rows = document.getElementsByClassName('gridRow');
    let columns = document.getElementsByClassName('gridColumn');
    const blue = document.getElementsByClassName('blue');
    const eraser = document.getElementsByClassName('eraser');
    const black = document.getElementsByClassName('black');
    let reset = document.getElementById('reset');
    
    function createGrid(number) {
        makeRow(number);
        makeColumn(number);
        changeColours();
    }
    
    function makeRow(numberOfRow) {
        for (let i = 0; i <numberOfRow; i++) {
            let row = document.createElement('div');
            container.appendChild(row);
            row.classList.add('gridRow');
        }
    }
    
    function makeColumn(numberOfColumn, selection) {
        for ( let i = 0; i < rows.length; i++) {
            for ( let j = 0; j < numberOfColumn; j++) {
                let column = document.createElement('div');   
                       
------- The part below is what I tried, erase it if you want it to work with just one colour -------
    
        if (selection == 'blue') {
            column.addEventListener('mouseenter', function() {
                column.classList.add('blue');
            }) 
            } else if (selection == 'eraser') {
                column.addEventListener('mouseenter', function()  {
                    column.classList.add('eraser');
            })
            } else if (selection == 'black') {
                column.addEventListener('mouseenter', function()  {
                    column.classList.add('black');
            })
            } else {
                column.addEventListener('mouseenter', function()  {
                    column.classList.add('colored'); 
                })
            }    
                //  column.addEventListener('mouseleave', () => {
                //     column.classList.remove('colored');
                //  })

------- Just erase part of the code above if you want to make it work -------

                rows[j].appendChild(column);
                column.classList.add('gridColumn');
            }   
        }
    }

------- The part below is what I tried, erase it if you want it to work with just one colour -------
    
    blue.addEventListener('click', function() {
            makeColumn(number, 'blue');
        }) 
        
    eraser.addEventListener('click', function() {
            makeColumn(number, 'white');
        })
        
    black.addEventListener('click', function() {
            makeColumn(number, 'black');
         })


------- Just erase part of the code above if you want to make it work -------
    

    createGrid(16);

  @importurl('https://fonts.googleapis.com/css2family=Asap:wght@400;600;700&display=swap');
    
    body {
        display: flex;
        height: 100%;
        width: 100%;
        flex-direction: column;
        background-color: beige;
        font-family: Asap, sans-serif;
        margin: 0;
        padding: 0;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    
    .header {
        display: flex;
        flex: 1;
        justify-content: center;
        
    }
     
    #setGridSize {
        display: inline-flex;
        justify-content: center;
        flex: 1;
        gap: 12px;
    }
    
    #guide {
        text-align: center;
        margin: 1px;
        font-family:  Asap, sans-serif;
        color: red;
        font-size: 13px;;
    }
    
    .container {
        display: flex;
        justify-content: center;
        align-content: center;
        align-items: center;
        border: 1px solid black;
        width: 550px;
        height: 550px;
    }
    
    .gridColumn {
        display: inline-flex;
        border: 1px solid beige;
        margin: -1px 0;
        width: 30px;
        height: 30px;
    }
    
    .colored{
        background: red;
      }
    
      .buttons {
        display: flex;
        flex: 1;
        gap: 20px;
        margin: 10px;
      }
    
      .blue {
        background: blue;
      }
    
      .eraser {
        background: white;
      }
    
      .black {
        background: black;
      }


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>DOM Manipulation and Events</title>
        <script src="javascript.js" defer></script>
        <link rel="stylesheet" href="styles.css">
    </head>
    
    <body>
        <h1 class="header"> Let's sketch ! </h1>
        <div id="setGridSize">
            <p> Grid size </p> <input type="text" placeholder="Size of Board" class="size-box"> 
            <button id="submit" > Submit </button>
        </div>
        <p id="guide"> Enter a number between 2 to 99</p>
    
          <div class="container"></div>
    
         <div class="buttons">
            <button class="blue"> Blue </button>
            <button class="eraser" > Eraser </button>
            <button class="black"> Black </button>
            <button class="rainbow" > Rainbow </button>
            <button class="reset" > Reset</button>
         </div> 
    </body>
    </html>