Javascript 如何使分区在单击时更改颜色？_Javascript_Html_Css

Javascript 如何使分区在单击时更改颜色？

javascript html css

Javascript 如何使分区在单击时更改颜色？,javascript,html,css,Javascript,Html,Css,我正在做奥丁项目中的蚀刻草图项目，但我遇到了麻烦。我已经创建了网格并将其显示在屏幕上，但我似乎找不到一种方法来让每个框在被点击时改变颜色。我尝试了所有的方法，但所有这些都导致每个部门的边界消失 etch-a-sketch.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="styl

我正在做奥丁项目中的蚀刻草图项目，但我遇到了麻烦。我已经创建了网格并将其显示在屏幕上，但我似乎找不到一种方法来让每个框在被点击时改变颜色。我尝试了所有的方法，但所有这些都导致每个部门的边界消失

etch-a-sketch.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <link rel="stylesheet" href="style.css" />
        <link rel="stylesheet" href="reset.css" />
    </head>
    <body>
        <div id="input">
            <form id="forrm" method="GET">
                <label for="size">Custom Size</label>
                <input id="size" type="text" name="size">
            </form>
        </div>
        <div id="container"></div>
        <script src="script.js"></script>
    </body>
</html>

script.js

const cont = document.getElementById('container');
for (let a=0; a < 256; a++){ 
    let him = document.createElement('div');
    him.classList.add('divi');
    him.setAttribute('style','border : solid 1px gray;')
    cont.appendChild(him);    
}

请看一下您的文档

forEach（）按升序为数组中的每个元素调用一次提供的回调函数

使用三个参数调用回调：

元素的值
元素的索引
正在遍历的数组对象

对于我们的示例，我们只对第一个参数感兴趣：元素的值

在回调中，当前元素保存在标签

divi

下。对于每个

divi

，我们可以为

单击事件

const cont=document.getElementById（'container'）；
for（设a=0；a<256；a++）{
让他=document.createElement（'div'）；
him.classList.add（'divi'）；
setAttribute（'style'，'border:solid 1px gray；'））
续：儿童（他）；
}
让gettin=document.querySelectorAll（'.divi'）；
gettin.forEach（divi=>{
divi.addEventListener（'click'，e=>{
e、 currentTarget.setAttribute（'style'，'background color:blue；'）
});
});
#容器{
边框：灰色实心1px；
高度：500px；
宽度：500px；
颜色：绿色；
左边距：自动；
右边距：自动；
位置：相对位置；
边缘顶部：30px；
显示：网格；
网格模板列：重复（16，1fr）；
网格模板行：重复（16，1fr）；
}
#输入{
显示：块；
文本对齐：居中；
}
#福尔姆{
左边距：自动；
右边距：自动；
}

定制尺寸
请参考下面的代码

const cont=document.getElementById（'container'）；
for（设a=0；a<256；a++）{
让他=document.createElement（'div'）；
him.classList.add（'divi'）；
setAttribute（'style'，'border:solid 1px gray；'））
续：儿童（他）；
}
函数setBackGroundColor（）{
this.style.backgroundColor=“蓝色”；
}
让gettin=document.getElementsByClassName（“divi”）；
for（var i=0；i

#容器{
边框：灰色实心1px；
高度：500px；
宽度：500px；
颜色：绿色；
左边距：自动；
右边距：自动；
位置：相对位置；
边缘顶部：30px；
显示：网格；
网格模板列：重复（16，1fr）；
网格模板行：重复（16，1fr）；
}
#输入{
显示：块；
文本对齐：居中；
}
#福尔姆{
左边距：自动；
右边距：自动；
}

定制尺寸
您需要为每个div分配onClick函数

const cont=document.getElementById（'container'）；
for（设a=0；a<256；a++）{
让他=document.createElement（'div'）；
him.classList.add（'divi'）；
setAttribute（'style'，'border:solid 1px gray；'））
续：儿童（他）；
}
让gettin=document.getElementsByClassName（'divi'）；
for（var i=0；i

#容器{
边框：灰色实心1px；
高度：500px；
宽度：500px；
颜色：绿色；
左边距：自动；
右边距：自动；
位置：相对位置；
边缘顶部：30px；
显示：网格；
网格模板列：重复（16，1fr）；
网格模板行：重复（16，1fr）；
}
#输入{
显示：块；
文本对齐：居中；
}
#福尔姆{
左边距：自动；
右边距：自动；
}

定制尺寸
我相信您希望在再次单击时删除颜色
为blue
classname添加css：
.blue{background: blue;}

单击div时使用classList.toggle（'blue'）

最好定义新函数，而不是在每个div上附加内联JS：

const cont=document.getElementById（'container'）；
对于（设a=0；a<256；a++）{
让他=document.createElement（'div'）；
him.classList.add（'divi'）；
setAttribute（'style'，'border:solid 1px gray；'）
续：儿童（他）；
}
让gettin=document.querySelectorAll（'.divi'）；
gettin.forEach（（e）=>{
e、 addEventListener（“单击”，toblue）；
});
函数toblue（）{
this.classList.toggle（'blue'）；
}
#容器{
边框：灰色实心1px；
高度：500px；
宽度：500px；
颜色：绿色；
左边距：自动；
右边距：自动；
位置：相对位置；
边缘顶部：30px；
显示：网格；
网格模板列：重复（16,1fr）；
网格模板行：重复（16,1fr）；
}
#输入{
显示：块；
文本对齐：居中；
}
#福尔姆{
左边距：自动；
右边距：自动；
}
蓝先生{
背景：蓝色；
}

定制尺寸

let gettin = document.querySelectorAll('divi');
gettin.ForEach((divi) , (e ) { 
   e.target.setAttribute('click' , 'background-color : blue'); 
});

.blue{background: blue;}