当我单击特定标签时，我希望它显示其唯一值，但它一直只显示第一个值

Question

即使点击你好，输出也将永远是再见

如何从特定标签中识别和获取唯一值？

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 必须是唯一的。没有两个元素可以共享相同的 ID。如果你想对元素进行分组，我建议改用类。

2. 此外，我认为H1 元素上的 value 属性不是有效的 HTML，因此请选择文本内容。

此示例向文档添加了一个事件侦听器，但不使用类。它改为检查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>

Answer 2

1. ID 必须是唯一的 - 使用类
2. 从更靠近那个窗口的地方委托 - 当你只做 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>