How to iterate through <li> elements and add an event handler to each one

November 3, 2022

I have an <ul> element containing a list of moods, and an <input>element in which the user has to type in a selected value from the list.

To save some typing a user can just click on a list item and the selected value will be written in the input box.

I’d like to know if there’s any way to make this a loop so my code is not this big wall of text.

Here’s my code:

//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>

Thanks in advance!

>Solution :

Add a single listener to the #moods container. On click, if the target (clicked element) is a <li>, set the input value to the target’s .textContent. (You don’t have HTML markup inside the <li>s, only text, so .textContent is more appropriate than .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>