通过 setAttribute 为 div 网格设置宽度和高度 - Etch-a-sketch。悬停时样式重置

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

我对编码还很陌生。 我正在编写一个 Etch-a-sketch(通过 Odin 项目)。 基本上,它由一个网格组成,当将鼠标悬停在该网格上时,网格的框将变为随机颜色。 (容器应该保持相同的尺寸) 加载页面后,它以 16x16 框的基本网格开始。

用户还可以选择创建自定义网格(例如,如果用户输入 50,容器将填充 50x50 的框,它们的高度和宽度适应填充容器)

我似乎卡在了这个阶段,当单击按钮并输入一定数量的框时,网格将更新。但是,当鼠标悬停在这个 'custom' 网格上时,框大小将重置为 CSS.

中定义的原始 width/height

将鼠标悬停在上方时,框应保持其自定义大小。 (以及改变颜色时)

在将清楚显示问题的代码笔下方,(输入自定义网格大小(性能最大 100)并按回车键)。

Codepen 这里有完整的 HTML/CSS/JS + 例子: 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})`;
 }

我认为问题可能是由 setAttribute(s) 引起的:我在 2 个函数中设置了 setAttribute:createCustomGrid() 和 changeBoxColor()。也许某处有冲突?但是我没有看到它,已经尝试了几个小时,但似乎找不到问题。

或者我是否应该去掉外部 CSS 中的宽度和高度并基于此重写 Javascript?并在 Javascript 函数中写入 'standard' 网格框大小,而不是在 CSS?

中定义它

希望你们中的某个人能给我指出正确的方向。我知道这可能不是编写该项目的最佳方式,但我主要是想了解我在这段代码中做错了什么。 (随着我的进步,我可以让它变得越来越高效,比如使用 CSS 网格等)

提前致谢!

我想我会更新我最初的问题; 经过几天的搜索和更新代码,我发现使用 setAttribute 设置元素的宽度和高度后,您使用 setAttribute 仅更改相同的样式设置元素,它会重置之前通过 setAttribute 指定的宽度和高度。 解决此问题的方法是在最新的 setAttribute 调用中再次指定宽度和高度。或者不使用 setAttribute 来设置样式,您可以通过 element.style.backgroundColor = 'color';

因此,如果其他人遇到同样的问题,希望对您有所帮助。 :)