Когда я нажимаю на определенный тег, я хочу, чтобы он показывал свое уникальное значение, но он продолжает показывать только первое значение

ProgramBox

Когда я нажимаю на определенный тег, я хочу, чтобы он показывал свое уникальное значение, но он продолжает показывать только первое значение

Post author:admin
Запись опубликована:20 января, 2022
Post category:Вопросы по программированию

#javascript #html #css #progressive-web-apps #addeventlistener

Вопрос:

Вывод всегда будет «До свидания», даже если нажать «Привет».

Как определить и получить уникальные значения из определенных тегов?

 addEventListener('click', function(e) {
  if (e.target amp;amp; 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>

Ответ №1:

Идентификаторы должны быть уникальными. Никакие два элемента не могут иметь один и тот же идентификатор. Если вы хотите сгруппировать элементы, я предлагаю вместо этого переключиться на классы.
Кроме того, я не думаю, что атрибут value H1 элемента является допустимым 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>

1. Я не рекомендую добавлять прослушиватели событий к каждому элементу. Кроме того, если вы решите добавить любой другой дочерний тег в H1, ваш первый код не будет работать, если вы нажмете на дочерний тег. Также в моем коде использовался атрибут данных, который, безусловно, является допустимым HTML

Ответ №2:

Идентификаторы должны быть уникальными — Используйте класс
Делегируйте полномочия из чего — то более близкого к этому окну-именно это вы делаете сейчас, когда делаете только 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 amp;amp; 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>

Метки: Когда я нажимаю на определенный тег, но он продолжает показывать только первое значение, чтобы он показывал свое уникальное значение, Я хочу