我如何讓我的分區在點擊時改變顏色？
[英]How do I make my divisions to change color when they are clicked?
問題描述
我正在做 Odin 項目中的 etch-a-sketch 項目，但遇到了麻煩。 我已經創建了網格並將其顯示在屏幕上，但我似乎無法找到一種方法來讓每個框在被點擊時改變顏色。 我已經嘗試了所有方法，但所有方法都導致每個 div 的邊框消失。
蝕刻草圖.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>
樣式文件
#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;
}
腳本.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);
}
我必須通過使用 js 來做到這一點。 我嘗試選擇容器中的所有分區，然后遍歷每個分區並添加一個這樣的事件，但它仍然不起作用並導致每個 div 的邊框消失：
腳本.js
let gettin = document.querySelectorAll('divi');
gettin.ForEach((divi) , (e ) {
e.target.setAttribute('click' , 'background-color : blue');
});
4 個解決方案
解決方案1
0 2020-02-24 10:16:24
查看forEach的文檔。
forEach()為數組中的每個元素按升序調用一次提供的回調函數
使用三個參數調用回調：
- 元素的值
- 元素的索引
- 正在遍歷的 Array 對象
對於我們的示例，我們只對第一個參數感興趣：元素的值。
在回調內部，我們將當前元素保存在標簽divi 。 對於每個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>
解決方案2
0 2020-02-24 10:27:50
請參考以下代碼。
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>
解決方案3
0 2020-02-24 10:28:31
您需要為每個 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>
解決方案4
0 2020-02-24 10:38:28
我相信您想再次單擊時刪除顏色。
為blue類名添加 css：
.blue{background: blue;}
單擊 div 時使用classList.toggle('blue') 。
最好定義新函數，而不是在每個 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>
如何在單擊時更改跨度文本的顏色，並在再次單擊時恢復正常？
[英]How do I change the color of the span text when it's clicked, and back to normal when clicked again?
如何使按鈕在單擊時改變顏色，然后在單擊其他按鈕時變回其原始顏色？
[英]How to make a button change color when clicked and then change back to its original color when a different button is clicked?
如何更改按鈕的顏色，以便在使用jQuery單擊按鈕時將其更改為另一種顏色？
[英]How do I change the color of a button so that it changes to another color when its clicked using jQuery?
單擊使用 Javascript 后，如何使形狀改變顏色？
[英]How do I make shapes change color after clicked on using Javascript?
使用 Javascript 單擊正方形時，如何使它們的顏色發生變化？
[英]How would I make the color of squares change when they are clicked using Javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.