當我單擊特定標簽時，我希望它顯示其唯一值，但它一直只顯示第一個值

Question

即使點擊你好，output 也將永遠告別

如何從特定標簽中識別和獲取唯一值？

 addEventListener('click', function(e) { if (e.target && e.target.id == 'democlass') { var x = document.getElementsByTagName("H1")[0].getAttribute("value"); document.getElementById("demo").innerHTML = x; } });

 #democlass { color: red; }

 <h1 id="democlass" value="Goodbye">Goodbye </h1> <h1 id="democlass" value="Hello ">Hello </h1> <p>Click the button to display the value of the id of the h1 element.</p> <p id="demo">Here lies new text</p>

Answer 1

1. ID 必須是唯一的 - 使用 class
2. 從更接近 window 的地方委托 - 這就是你現在只做addEventListener時所做的事情
3. 使用數據屬性而不是屬於表單字段的值屬性。 或者使用代碼中與屬性相同的 textContent

 document.getElementById("container").addEventListener('click', function(e) { const tgt = e.target.closest("h1"); // in case you add tags to the H1s if (tgt && tgt.classList.contains('democlass')) { var x = tgt.dataset.value; // or tgt.textContent document.getElementById("demo").innerHTML = x; } });

 #democlass { color: red; }

 <div id="container"> <h1 class="democlass" data-value="Goodbye">Goodbye </h1> <h1 class="democlass" data-value="Hello ">Hello </h1> </div> <p>Click the header to display the value of the id of the h1 element.</p> <p id="demo">Here lies new text</p>

Answer 2

1. ID 必須是唯一的。 沒有兩個元素可以共享相同的 ID。 如果你想對元素進行分組，我建議改用類。

2. 此外，我不認為H1元素上的 value 屬性是有效的 HTML，所以 select 是文本內容。

此示例向文檔添加事件偵聽器，但不使用類。 它改為檢查nodeName 。

 const demo = document.querySelector('#demo'); document.addEventListener('click', function(e) { const { target: { nodeName } } = e; if (nodeName === 'H1') { const value = e.target.textContent; demo.textContent = value; } });

 #democlass { color: red; }

 <h1>Goodbye</h1> <h1>Hello</h1> <p>Click the button to display the value of the class attribute of the h1 element.</p> <p id="demo">Here lies new text</p>

您可能只想定位標題，而不是在文檔級別設置事件偵聽器。 在這個例子中，我使用了類：

 const demo = document.querySelector('#demo'); const h1s = document.querySelectorAll('.democlass'); h1s.forEach(h1 => h1.addEventListener('click', handleClick, false)); function handleClick(e) { const value = e.target.textContent; demo.textContent = value; }

 #democlass { color: red; }

 <h1 class="democlass">Goodbye</h1> <h1 class="democlass">Hello</h1> <p>Click the button to display the value of the class attribute of the h1 element.</p> <p id="demo">Here lies new text</p>

但是您可能不想為每個標題添加事件偵聽器。 如果您有 100 個標題而不是兩個標題會怎樣。好吧，您可以利用事件“冒泡”DOM 的事實。 Event delegation允許您向父元素添加事件偵聽器，以便在事件冒泡時“捕獲”事件。

 const demo = document.querySelector('#demo'); const container = document.querySelector('.container'); container.addEventListener('click', handleClick, false); function handleClick(e) { const { target: { textContent } } = e; demo.textContent = textContent; }

 #democlass { color: red; }

 <div class="container"> <h1 class="democlass">Goodbye</h1> <h1 class="democlass">Hello</h1> </div> <p>Click the button to display the value of the class attribute of the h1 element.</p> <p id="demo">Here lies new text</p>