JavaScript

I’m quite new to coding. I’m coding an Etch-a-sketch (via the Odin Project). Basically, it consists of a grid, which when hovered over, the boxes of the grid will change to a random color. (the container is supposed to keep the same dimensions) Upon loading the page, it starts with a basic grid of 16×16 boxes.

The user also has the option to create a custom grid (for example, if the user enters 50, the container will be filled with 50×50 boxes, with their height and width adapted to fill the container)

I seem to be stuck at this stage, when the button is clicked and you enter an amount of boxes, the grid will update. But then, when hovering over this ‘custom’ grid, the box size resets to the original width/height defined in the CSS.

The boxes should keep their custom size when hovered over. (and when the color is changed)

Below a codepen which will show the issue clearly, (enter a custom grid size(max 100 for performance) and hit enter).

Codepen here with the full HTML/CSS/JS + example: Codepen

const gridSizeButton = document.getElementById('gridSizeButton');
 gridSizeButton.addEventListener('click', customGridSize);
 let gridContainer = document.getElementById('gridContainer');
 let boxes = document.querySelectorAll('.box');

function customGridSize() {
    let input = prompt('Please enter your desired gridsize. (max 100)');
    //convert to number
    let gridSize = parseInt(input);
    console.log('Gridsize requested:' + gridSize);
    //create grid with gridSize input
    createCustomGrid(gridSize);
}

function createCustomGrid(gridSize) {
    //calculate total amount of boxes
    let boxAmount = gridSize * gridSize;
    console.log('total amount of boxes needed:' + boxAmount);
    //calculate box size (standard grid is 400px wide and high)
    let boxSize = (400 / gridSize) + 'px';
    console.log('Boxsize:' + boxSize);
    //before creating new grid, remove standard grid (boxes) loaded on start page
    while (gridContainer.firstChild) gridContainer.removeChild(gridContainer.firstChild);
    console.log("Boxamount: " + boxAmount);

    for (let i = 0; i < boxAmount; i++) {
        createBox();
        console.log('custombox created');
    }
        let boxes = document.querySelectorAll('.box');
        boxes.forEach(box => {
        box.setAttribute('style', `width:${boxSize}; height:${boxSize}; background:${changeColor}`);
        })

}

//create standard grid on page load:
 createStandardGrid();

function createStandardGrid() {
        for (i = 0; i<256; i++) {
        createBox();
        console.log("box created");
        }
}

 function createBox () {
    const box = document.createElement('div');
    box.classList.add("box");
    document.getElementById("gridContainer").appendChild(box);
    box.addEventListener('mouseover',changeBoxColor);
 }

 function changeBoxColor(e) {
    e.target.setAttribute('style', `background: ${changeColor()}`);
    console.log(e.target.className);
 }

 function changeColor(){
    let r = Math.floor(Math.random() * 255); 
    let g = Math.floor(Math.random() * 255); 
    let b = Math.floor(Math.random() * 255);
    return `rgb(${r},${g},${b})`;
 }

I think the issue might be due to the setAttribute(s): I have setAttribute in 2 functions: createCustomGrid() and changeBoxColor(). Maybe there is a conflict somewhere? But I fail to see it, have been trying things for several hours, but cannot seem to find the issue.

Or should I maybe get rid of the width and height in the external CSS and rewrite the Javascript based on this? And write the ‘standard’ grid box size in a Javascript function instead of define it in the CSS?

Hoping someone of you can point me in the right direction. I know it’s probably not the most optimal way of coding this project, but I’m mainly trying to understand what I’m doing wrong in this code. (and as I progress I can make it more and more efficient, such as use CSS grid etc)

Thank you in advance!

Answer

I thought I would update my initial question; after a few days of searching and updating the code, I found out that when using setAttribute to set the width and height of an element, and afterwards you use setAttribute to change only a style setting on the same element, it resets the width and height specified earlier via setAttribute. A way around this would be to specify the width and height again in the latest setAttribute call. Or instead of using setAttribute to set styling, you could do it via element.style.backgroundColor = 'color';

So if anyone else runs into the same issue, hope it helps. 🙂

setting width, height via setAttribute for a grid of divs – Etch-a-sketch. Style resets when hovered over

Advertisement

Answer