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

Question

即使点击hello，输出也总是goodbye

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

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

ID 必须是唯一的 - 使用 class
从更接近 window 的地方委派 - 这就是您现在只做 addEventListener
使用数据属性代替属于表单字段的值属性。或者使用代码中与属性相同的 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

ID 必须是唯一的。没有两个元素可以共享相同的 ID。如果你想对元素进行分组，我建议改用类。
此外，我认为 H1 元素上的值属性无效 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 允许您将事件侦听器添加到 parent 元素以在事件冒泡时“捕获”事件。

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>

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

When i click on specific tag i want it to show its unique value but it keeps showing only the first value

javascript

html

css

progressive-web-apps

addeventlistener