I want to change the color of my individual grid squares to black when hovering over them. I know that my play() function is not working properly, and want to know how to make it right. Also I need to call on the gridSquare for my clearBtn to change everything back to white. What’s a better way I can go about this; I’m new to JavaScript.

const colorBtn = document.getElementById('color')
const shadeBtn = document.getElementById('shade')
const eraseBtn = document.getElementById('erase')
const clearBtn = document.getElementById('clear')
const gridCont = document.getElementById('grid')
let currentMode=""

// creates grid on pageload
function makeGrid() {
  for (i = 0; i < 1600; i++) {
    let gridSquare = document.createElement('div')
    gridCont.appendChild(gridSquare)
    gridSquare.classList.add('gridSquare')

  }
}


window.onload = makeGrid()
//

colorBtn.addEventListener('click', () => {
  currentMode="color"
})

shadeBtn.addEventListener('click', () => {
  currentMode="shade"
})

eraseBtn.addEventListener('click', () => {
  currentMode="erase"
})

clearBtn.addEventListener('click', () => {

})

function play() {
  document.querySelectorAll('.gridSquare').forEach((item) => {
    addEventListener('mouseover', (e) => {
      e.target.style.BackgroundColor="black"
    })
  })
}

window.onload = play()
<div class="titlebox">
  <h1>sribblyscrabblydoo</h1>
  <p>Draw or something idk bro</p>
</div>
<div class="mainbod">
  <div class="options">
    <div class="buttons">
      <h2>Options</h2>
    </div>
    <div class="buttons">
      <button id="color">Color</button>
    </div>
    <div class="buttons">
      <button id="shade">Shade</button>
    </div>
    <div class="buttons">
      <button id="erase">Erase</button></div>
    <div class="buttons">
      <button id="clear">Clear</button>
    </div>
    <div class="buttons">
      <button id="github">Duskope Github</button>
    </div>
  </div>
  <div id="grid"></div>
</div>

https://duskope.github.io/scribblyscrabblydoo/

2

Why don’t you do this in CSS instead? For fun, I’ve included also option of JS but it will be slower.

const colorBtn = document.getElementById('color')
const shadeBtn = document.getElementById('shade')
const eraseBtn = document.getElementById('erase')
const clearBtn = document.getElementById('clear')
const gridCont = document.getElementById('grid')
let currentMode=""

// creates grid on pageload
function makeGrid() {
  for (i = 0; i < 1600; i++) {
    let gridSquare = document.createElement('div')
    gridCont.appendChild(gridSquare)
    gridSquare.classList.add('gridSquare')

    // ADDED THIS:
    gridSquare.addEventListener("mouseenter", function() {
      this.style.transform = "scale(1.25)";
    })

    gridSquare.addEventListener("mouseleave", function() {
      this.style.transform = "none";
    })

  }
}


window.onload = makeGrid()
//

colorBtn.addEventListener('click', () => {
  currentMode="color"
})

shadeBtn.addEventListener('click', () => {
  currentMode="shade"
})

eraseBtn.addEventListener('click', () => {
  currentMode="erase"
})

clearBtn.addEventListener('click', () => {

})

function play() {
  document.querySelectorAll('.gridSquare').forEach((item) => {
    addEventListener('mouseover', (e) => {
      e.target.style.BackgroundColor="black"
    })
  })
}

window.onload = play()
.gridSquare:hover {
  background-color: red;
}
<!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>scribblyscrabblydoo</title>
  <link rel="stylesheet" href="https://duskope.github.io/scribblyscrabblydoo/styles.css">
</head>

<body>
  <div class="titlebox">
    <h1>sribblyscrabblydoo</h1>
    <p>Draw or something idk bro</p>
  </div>
  <div class="mainbod">
    <div class="options">
      <div class="buttons">
        <h2>Options</h2>
      </div>
      <div class="buttons">
        <button id="color">Color</button>
      </div>
      <div class="buttons">
        <button id="shade">Shade</button>
      </div>
      <div class="buttons">
        <button id="erase">Erase</button></div>
      <div class="buttons">
        <button id="clear">Clear</button>
      </div>
      <div class="buttons">
        <button id="github">Duskope Github</button>
      </div>
    </div>
    <div id="grid"></div>
  </div>
</body>


</html>