I've been tackling a fun little project from The Odin Project called "ETCH-A-SKETCH". The idea is to change the color of squares when the mouse hovers over them, but I'm having trouble getting the onmouseover event to trigger. Any idea what could be causing the issue?
index.html
<!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" />
<link rel="stylesheet" href="style.css" />
<title>ETCH-A-SKETCH</title>
</head>
<body>
<div class="container"></div>
<script src="app.js"></script>
</body>
</html>
app.js
const body = document.querySelector('body');
const Btn = document.createElement('button');
const container = document.querySelector('.container');
const squares = document.querySelectorAll('.square');
body.append(Btn);
body.insertBefore(Btn, container);
Btn.innerText = 'Create A New Grid';
....
squares.forEach((square) => {
square.addEventListener('onmouseover', (e) => {
console.log(e);
e.preventDefault();
square.classList.add('zapper');
});
});
style.css
.zapper {
background-color: #fff;
}
.zapper:hover {
background-color: black;
}