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

jabrij93 — Thu, 28 Jul 2022 11:08:26 +0000

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>

DEV Community: jabrij93

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