使用未使用jQuery的JavaScript單擊時更改HTML div的背景色

-2

嘗試實現一個非常簡單的功能，僅使用不帶jQuery的JavaScript。當我點擊它時，我想要使用id='tags'的HTML div的背景進行更改。使用未使用jQuery的JavaScript單擊時更改HTML div的背景色

document.getElementById('tags').addEventListener('onclick', function() { 
 
    this.style.backgroundColor = 'red'; 
 
});

<body> 
 
    <div id="tags">Item1</div> 
 
    <div id='tags'>Item2</div> 
 
    <div id='tags'>Item3</div> 
 
</body>

來源

2017-05-01 Dmitry Rastorguev

的id的基本規則是，其獨特的！而你真的在殺死這條基本規則。它只能分配一個唯一的值 –

Identiifiers在HTML中必須是唯一，使用常見的CSS類來代替。
使用querySelectorAll()，對其進行定位，因爲它會返回一個列表，迭代，並結合事件處理程序
刪除「的」

document.querySelectorAll('.tags').forEach(function(element) { 
 
    element.addEventListener('click', function() { 
 
    this.style.backgroundColor = 'red'; 
 
    }); 
 
})

<div class="tags">Item1</div> 
 
<div class='tags'>Item2</div> 
 
<div class='tags'>Item3</div>

來源

2017-05-01 11:51:27 Satpal

的幾個問題在這裏前綴：

你的腳本是（或之前你編輯t他的問題）在將<div>元素添加到文檔之前執行;需要將<script>放置在HTML源代碼中的<div>之後。
你不能有多個元素與id相同。改爲使用class="tags"。
事件是"click"不"onclick"

這裏是我會怎麼做，而不是：

<body> 
 
\t <div class="tags">Item1</div> 
 
\t <div class="tags">Item2</div> 
 
\t <div class="tags">Item3</div> 
 
\t <script> 
 
\t \t for (let x of document.getElementsByClassName('tags')) { 
 
\t \t \t x.addEventListener('click', function() { 
 
\t \t \t \t this.style.backgroundColor = 'red'; 
 
\t \t \t }); 
 
\t \t } 
 
\t </script> 
 
</body>

來源

2017-05-01 11:52:52 Cauterite

使用未使用jQuery的JavaScript單擊時更改HTML div的背景色

回答

相關問題