我如何让我的分区在点击时改变颜色？

Question

I am doing the etch-a-sketch project from the Odin project but I have ran into a trouble.我正在做 Odin 项目中的 etch-a-sketch 项目，但遇到了麻烦。 I have created the grid and displayed it on the screen but I can't seem to find a way to make each box change color when they are clicked upon.我已经创建了网格并将其显示在屏幕上，但我似乎无法找到一种方法来让每个框在被点击时改变颜色。 I have tried all the ways but all of them result in the disappearance of each div's border.我已经尝试了所有方法，但所有方法都导致每个 div 的边框消失。

etch-a-sketch.html蚀刻草图.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>

style.css样式文件

#container {
    border: gray solid 1px;
    height: 500px;
    width: 500px;
    color: green;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(16,1fr);
    grid-template-rows: repeat(16,1fr);

}


#input {
    display: block;
    text-align: center;
}

#forrm {

    margin-left: auto;
    margin-right: auto;


}

script.js脚本.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);    
}

i have to do this by using js.我必须通过使用 js 来做到这一点。 i have tried selecting all the divisions in the container then iterating through each of them and adding an event like so but it still doesnt work and results in the borders of each div to disappear :我尝试选择容器中的所有分区，然后遍历每个分区并添加一个这样的事件，但它仍然不起作用并导致每个 div 的边框消失：

script.js脚本.js

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

Answer 1

Have a look at the docs for forEach .查看forEach的文档。

forEach() calls a provided callback function once for each element in an array in ascending order forEach()为数组中的每个元素按升序调用一次提供的回调函数

Callback is invoked with three arguments:使用三个参数调用回调：

the value of the element元素的值

the index of the element元素的索引

the Array object being traversed正在遍历的 Array 对象

For our example, we are only interested in the first argument: the value of the element .对于我们的示例，我们只对第一个参数感兴趣：元素的值。

Inside the callback, we have the current element saved under the label divi .在回调内部，我们将当前元素保存在标签divi 。 To each divi , we can addEventListener for the click event.对于每个divi ，我们可以的addEventListener的click事件。

 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); } let gettin = document.querySelectorAll('.divi'); gettin.forEach(divi => { divi.addEventListener('click', e => { e.currentTarget.setAttribute('style', 'background-color : blue;') }); });

 #container { border: gray solid 1px; height: 500px; width: 500px; color: green; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(16, 1fr); } #input { display: block; text-align: center; } #forrm { margin-left: auto; margin-right: auto; }

 <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>

Answer 2

Please refer below code.请参考以下代码。

 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); } function setBackGroundColor() { this.style.backgroundColor = "blue"; } let gettin = document.getElementsByClassName("divi"); for (var i = 0; i < gettin.length; i++) { gettin[i].addEventListener('click', setBackGroundColor); }

 #container { border: gray solid 1px; height: 500px; width: 500px; color: green; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(16, 1fr); } #input { display: block; text-align: center; } #forrm { margin-left: auto; margin-right: auto; }

 <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>

Answer 3

You need to assign onClick function to each div您需要为每个 div 分配 onClick 函数

 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); } let gettin = document.getElementsByClassName('divi'); for (var i = 0; i < gettin.length; i++){ gettin[i].onclick = changeColor; } function changeColor(e){ e.target.setAttribute('style', 'background-color : blue'); }

 #container { border: gray solid 1px; height: 500px; width: 500px; color: green; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: repeat(16, 1fr); } #input { display: block; text-align: center; } #forrm { margin-left: auto; margin-right: auto; }

 <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>

Answer 4

I believe you want to remove color when clicked again.我相信您想再次单击时删除颜色。

Add css for blue classname:为blue类名添加 css：

.blue{background: blue;}

Use classList.toggle('blue') when clicked on div.单击 div 时使用classList.toggle('blue') 。

It is better to define new function instead of attaching inline JS on each div:最好定义新函数，而不是在每个 div 上附加内联 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); } let gettin = document.querySelectorAll('.divi'); gettin.forEach((e)=>{ e.addEventListener("click",toblue); }); function toblue(){ this.classList.toggle('blue'); }

 #container { border: gray solid 1px; height: 500px; width: 500px; color: green; margin-left: auto; margin-right: auto; position: relative; margin-top: 30px; display: grid; grid-template-columns: repeat(16,1fr); grid-template-rows: repeat(16,1fr); } #input { display: block; text-align: center; } #forrm { margin-left: auto; margin-right: auto; } .blue{ background: blue; }

 <!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>

我如何让我的分区在点击时改变颜色？

问题描述

4 个解决方案

解决方案1
0 2020-02-24 10:16:24

解决方案2
0 2020-02-24 10:27:50

解决方案3
0 2020-02-24 10:28:31

解决方案4
0 2020-02-24 10:38:28

我如何让我的分区在点击时改变颜色？

问题描述

4 个解决方案

解决方案1 0 2020-02-24 10:16:24

解决方案2 0 2020-02-24 10:27:50

解决方案3 0 2020-02-24 10:28:31

解决方案4 0 2020-02-24 10:38:28

解决方案1
0 2020-02-24 10:16:24

解决方案2
0 2020-02-24 10:27:50

解决方案3
0 2020-02-24 10:28:31

解决方案4
0 2020-02-24 10:38:28