Buttons not working, xxxx.addEventListener is not a function. Please help !

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>

Comments

[Andrew Bone]

Hi, Dev.to isn't really a place to get help with problems like this, stackoverflow might be better suited.

That being said the issue you're facing is that getElementsByClassName returns an array of elements rather than just one. You can either access the the first element of the array with blue[0].addEve... or you can swap your getElementsByClassName('blue') with querySelector('.blue'). Unfortunately even with those changes there are other things wrong with the code. Are you following a tutorial or anything?

[jabrij93]

Hi, I am sorry for that. I am completing a project from The Odin Project. There are solutions but I think it would be better if I can write it by myselves as well as recognizing the hole and gap that I have in my knowledge and comprehension. hm...