I am making a sketchpad (Etch-a-sketch) that colors the blocks within the grid as you click and drag the cursor over them. For that, I used the mousedown event.
The problem I face is that even though I have applied the event to all the elements using a for loop, the mousedown events do not carry over to the other elements within the sketchpad container.
HTML
<body>
<header>
<h1>Sketchpad 1.0</h1>
</header>
<main id="main">
<div class="settings-panel">
<button id="grid-size">CREATE GRID</button>
<button class="hidden" id="pencil">PENCIL</button>
<button class="hidden" id="rainbow">RAINBOW</button>
<button class="hidden" id="eraser">ERASER</button>
<button class="hidden" id="reset">RESET</button>
</div>
<div class="sketchpad">
</div>
</div>
</main>
<footer>
<a href="https://www.linkedin.com/in/guchierrez/" target="_blank">
<img src="./icons/linkedin.png">
</a>
<a href="https://github.com/guchierrez/etch-a-sketch" target="_blank">
<img src="./icons/github.png">
</a>
</footer>
</body>
JavaScript
/*========================================
======5. DRAWING BUTTON FUNCTIONALITY=====
=======PENCIL, RAINBOW AND ERASER=========
========================================*/
pencilButton.addEventListener("click", function () {
const blocks = document.querySelectorAll(".block");
for (i = 0; i < blocks.length; i++) {
const blocks2 = document.getElementById(`block-${i}`);
blocks2.addEventListener("mousedown", function () {
for (i = 0; i < blocks.length; i++) {
blocks2.style.backgroundColor = "black";
}
});
}
});
const colors = [
"#9400D3",
"#4B0082",
"#0000FF",
"#00FF00",
"#FFFF00",
"#FF7F00",
"#FF0000",
];
rainbowButton.addEventListener("click", function () {
const blocks = document.querySelectorAll(".block");
for (i = 0; i < blocks.length; i++) {
const blocks2 = document.getElementById(`block-${i}`);
blocks2.addEventListener("mousedown", function () {
for (i = 0; i < blocks.length; i++) {
let randomColors = colors[(colors.length * Math.random()) | 0];
blocks2.style.backgroundColor = randomColors;
}
});
}
});
eraserButton.addEventListener("click", function () {
const blocks = document.querySelectorAll(".block");
for (i = 0; i < blocks.length; i++) {
const blocks2 = document.getElementById(`block-${i}`);
blocks2.addEventListener("mousedown", function () {
for (i = 0; i < blocks.length; i++) {
blocks2.style.backgroundColor = "white";
}
});
}
});
It works as intended with mouseover, but it colors indefinitely. I would like to be able to color only when the click button is pressed.