使用Javascript選擇一個元素

Question

嘿＃2的開發者，我有這樣的代碼

<div id="1"></div><div id="2"></div><div id="3"></div><div id="4"></div><div id="5"></div><br> 
     <div id="6"></div><div id="7"></div><div id="8"></div><div id="9"></div><div id="10"></div><br> 
     <div id="11"></div><div id="12"></div><div id="13"></div><div id="14"></div><div id="15"></div><br> 
     <div id="16"></div><div id="17"></div><div id="18"></div><div id="19"></div><div id="20"></div><br> 
     <div id="21"></div><div id="22"></div><div id="23"></div><div id="24"></div><div id="25"></div><br>   

     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script> 
     <script src="../sketch.js"></script> 
     <script> 
document.getElementsByTagName("div")[0].addEventListener("click", displayDate); 

function displayDate() { 
    this.style.backgroundColor = 'red'; 
} 
</script> 

我希望能夠點擊一個div和的Javascript（不是jQuery的）改變背景顏色只被點擊的div。我已經嘗試了一切。我該怎麼做？

Answer 1

您可以使用.querySelectorAll()選擇所有div元素與id，迭代div的NodeList元素，一環內連接click處理

<div id="1"></div> 
 
<div id="2"></div> 
 
<div id="3"></div> 
 
<div id="4"></div> 
 
<div id="5"></div><br> 
 
<div id="6"></div> 
 
<div id="7"></div> 
 
<div id="8"></div> 
 
<div id="9"></div> 
 
<div id="10"></div><br> 
 
<div id="11"></div> 
 
<div id="12"></div> 
 
<div id="13"></div> 
 
<div id="14"></div> 
 
<div id="15"></div><br> 
 
<div id="16"></div> 
 
<div id="17"></div> 
 
<div id="18"></div> 
 
<div id="19"></div> 
 
<div id="20"></div><br> 
 
<div id="21"></div> 
 
<div id="22"></div> 
 
<div id="23"></div> 
 
<div id="24"></div> 
 
<div id="25"></div><br> 
 

 
<script> 
 
    let divs = document.querySelectorAll("div[id]"); 
 
    for (let div of divs) { 
 
    div.textContent = div.id; 
 
    div.addEventListener("click", displayDate); 
 
    } 
 

 
    function displayDate() { 
 
    this.style.backgroundColor = 'red'; 
 
    } 
 
</script>

Answer 2

當沒有值/文本時div被忽略。你的代碼很好。只需添加一些東西給div。

<div id="1">some value</div><div id="2"></div><div id="3"></div><div id="4"></div><div id="5"></div><br> 
 
     <div id="6"></div><div id="7"></div><div id="8"></div><div id="9"></div><div id="10"></div><br> 
 
     <div id="11"></div><div id="12"></div><div id="13"></div><div id="14"></div><div id="15"></div><br> 
 
     <div id="16"></div><div id="17"></div><div id="18"></div><div id="19"></div><div id="20"></div><br> 
 
     <div id="21"></div><div id="22"></div><div id="23"></div><div id="24"></div><div id="25"></div><br>   
 

 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script> 
 
     <script src="../sketch.js"></script> 
 
     <script> 
 
document.getElementsByTagName("div")[0].addEventListener("click", displayDate); 
 

 
function displayDate() { 
 
    this.style.backgroundColor = 'red'; 
 
} 
 
</script>

Answer 3

我覺得你的股利是不可見的，因爲它沒有內容，也因爲沒有高度或寬度。我用CSS添加了高度和寬度，然後工作。 您也可以按上面的建議添加內容。

document.getElementsByClassName('test')[0].addEventListener('click', function(event){ 
 
\t this.style.backgroundColor = 'red'; 
 
});

.test { 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: blue; 
 
}

<div class="test"></div>