Issue
How do I access the divs and color them when the mouse is hovered over them. They are created inside a bigger container when the user inputs a value and i cannot access them by another fucntion.
HTML
<body>
<div>
<div id="outer_container">
<div id="container"> </div>
</div>
<div id="user_input_container">
<input type="color" class="user_input" name="" id="colour_picker" value="#000000">
<button class="user_input" id="rainbow">Rainbow</button>
<div>
<div>
<input class="user_input" type="range" min="2" max="100" value="16" name="options"
id="grid_range">
</div>
</body>
Javascript
let container = document.getElementById(`container`);
function createGrid(number) {
totalNumber = number * number;
while (container.hasChildNodes()) {
container.removeChild(container.firstChild);
}
for (let i = 0; i < totalNumber; i++) {
let gridSquare = document.createElement("div");
gridSquare.classList.add("grid_square");
let cellwidth = container.clientWidth / number + `px`;
let cellheight = container.clientHeight / number + `px`;
gridSquare.style.width = `${cellwidth}`;
gridSquare.style.height = `${cellheight}`;
container.appendChild(gridSquare);
}
}
document.addEventListener("DOMContentLoaded", () => {
createGrid(range.value);
});
let range = document.getElementById(`grid_range`);
range.addEventListener(`change`, () => {
createGrid(range.value);
});
let color = document.getElementById(`colour_picker`);
What I did was just add an eventlistener() in the createdGrid() function that takes the value from "color" picker, but really not able to access the divs inside and get them colored by and oustside fucntions specifically for coloring.
The eventlistener() below is what I added inside the for() loop of createdGrid function.
gridSquare.addEventListener("mouseover", (event) => {
event.target.style.backgroundColor = color.value;
});
Thanks!
Solution
Correct, if you want to handle changing the color to a specific color selected by the user or changing it to random colors when the rainbow button is pressed, you'll need to modify the handleGridSquareMouseOver function to check the current mode and apply the appropriate color.
let container = document.getElementById(`container`);
let colorPicker = document.getElementById(`colour_picker`);
let rainbowButton = document.getElementById(`rainbow`);
let range = document.getElementById(`grid_range`);
let currentColorMode = 'user'; // Initial mode is user-selected color
function createGrid(number) {
totalNumber = number * number;
while (container.hasChildNodes()) {
container.removeChild(container.firstChild);
}
for (let i = 0; i < totalNumber; i++) {
let gridSquare = document.createElement("div");
gridSquare.classList.add("grid_square");
let cellwidth = container.clientWidth / number + `px`;
let cellheight = container.clientHeight / number + `px`;
gridSquare.style.width = `${cellwidth}`;
gridSquare.style.height = `${cellheight}`;
container.appendChild(gridSquare);
// Add event listener for coloring on mouseover
gridSquare.addEventListener("mouseover", handleGridSquareMouseOver);
}
}
function handleGridSquareMouseOver(event) {
if (currentColorMode === 'user') {
// Use user-selected color
event.target.style.backgroundColor = colorPicker.value;
} else if (currentColorMode === 'rainbow') {
// Use random color for the rainbow mode
event.target.style.backgroundColor = getRandomColor();
}
}
function getRandomColor() {
// Function to generate a random hex color
return `#${Math.floor(Math.random()*16777215).toString(16)}`;
}
document.addEventListener("DOMContentLoaded", () => {
createGrid(range.value);
});
range.addEventListener(`change`, () => {
createGrid(range.value);
});
// Event listener for the Rainbow button
rainbowButton.addEventListener('click', () => {
// Set the current mode to rainbow
currentColorMode = 'rainbow';
});
// You can also add an event listener for the color picker change if needed
colorPicker.addEventListener('input', () => {
// Update the existing grid with the new color
currentColorMode = 'user';
updateGridColor(colorPicker.value);
});
function updateGridColor(color) {
let gridSquares = document.getElementsByClassName("grid_square");
for (let i = 0; i < gridSquares.length; i++) {
gridSquares[i].style.backgroundColor = color;
}
}Answered By - Ermiyas Arage
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.