如何遍历 <li> 元素并为每个元素添加一个事件处理程序答案

【问题标题】：How to iterate through <li> elements and add an event handler to each one如何遍历 <li> 元素并为每个元素添加一个事件处理程序
【发布时间】：2022-11-03 13:10:38
【问题描述】：

我有一个包含情绪列表的元素，用户必须在其中输入从列表中选择的值。

要节省一些输入，用户只需单击列表项，所选值将写入输入框中。

我想知道是否有任何方法可以使它成为一个循环，所以我的代码不是这么大的文字墙。

这是我的代码：

//variable declarations
const input = document.getElementById('input')

const upbeat = document.getElementById('upbeat');
const emotional = document.getElementById('emotional');
const melancholic = document.getElementById('melancholic');
const hopeful = document.getElementById('hopeful');
const content = document.getElementById('content');
const sad = document.getElementById('sad');
const anxious = document.getElementById('anxious');
const angsty = document.getElementById('angsty');


//event handlers
upbeat.addEventListener('click', function () {
  input.value = upbeat.innerHTML;
});
upbeat.addEventListener('click', function () {
  input.value = upbeat.innerHTML;
});
emotional.addEventListener('click', function () {
  input.value = emotional.innerHTML;
});
melancholic.addEventListener('click', function () {
  input.value = melancholic.innerHTML;
});
hopeful.addEventListener('click', function () {
  input.value = hopeful.innerHTML;
});
content.addEventListener('click', function () {
  input.value = content.innerHTML;
});
sad.addEventListener('click', function () {
  input.value = sad.innerHTML;
});
anxious.addEventListener('click', function () {
  input.value = anxious.innerHTML;
});
angsty.addEventListener('click', function () {
  input.value = angsty.innerHTML;
});

//HTML
        <ul id="moods">
          <li class="li" id="upbeat">upbeat</li>
          <li class="li" id="emotional">emotional</li>
          <li class="li" id="melancholic">melancholic</li>
          <li class="li" id="hopeful">hopeful</li>
          <li class="li" id="content">content</li>
          <li class="li" id="sad">sad</li>
          <li class="li" id="anxious">anxious</li>
          <li class="li" id="angsty">angsty</li>
        </ul>
        <form id="form" action="index.html">
          <input type="text" id="input" value="">
          <button type="button" id="submit">Submit</button>
          <button type="reset" id="reset" value="reset">Reset</button>
        </form>

提前致谢！

【问题讨论】：

标签： javascript loops dom

【解决方案1】：

将单个侦听器添加到 #moods 容器。单击时，如果目标（单击的元素）是<li>，则将输入值设置为目标的.textContent。（<li>s 中没有 HTML 标记，只有文本，所以.textContent 比.innerHTML 更合适）

const input = document.querySelector('input');
document.querySelector('#moods').addEventListener('click', (e) => {
  if (e.target.matches('li')) {
    input.value = e.target.textContent;
  }
});

<ul id="moods">
  <li class="li" id="upbeat">upbeat</li>
  <li class="li" id="emotional">emotional</li>
  <li class="li" id="melancholic">melancholic</li>
  <li class="li" id="hopeful">hopeful</li>
  <li class="li" id="content">content</li>
  <li class="li" id="sad">sad</li>
  <li class="li" id="anxious">anxious</li>
  <li class="li" id="angsty">angsty</li>
</ul>
<form id="form" action="index.html">
  <input type="text" id="input" value="">
  <button type="button" id="submit">Submit</button>
  <button type="reset" id="reset" value="reset">Reset</button>
</form>

【讨论】：