Several todo lists on one page, how to get multiple submissions on the same page

Question

I have a weekly planner that is essentially several todo lists on one page. I have one that functions, but I do not know how to make it so each one responds to each individual input field and respective ul and li.

Currently the one that functions works off of a add button, submits and creates the li, can check it off and uncheck itself and has a remove function.

If I were to however enter an input to the next field, it does not understand it as a value.

Example of the HTML:

<div class="day" id="monday"><div class="span"><h3 class="day-title">Monday</h3></div>
<input type="text" class="input" id="input-area"><button onclick="addTask()"><img src="/Images/plus.png" id="add-button"></button>
<ul id='list'></ul>
</div>

<div class="day" id="tuesday"><div class="span"><h3 class="day-title">Tuesday</h3></div>
<input type="text" class="input" id="input-area"><button id="add" onclick="addTask()"><img src="/Images/plus.png" id="add-button"></button>
<ul id='list'></ul></div>

<div class="day" id="wednesday"><div class="span"><h3 class="day-title">Wednesday</h3></div>
<input type="text" class="input" id="input-area"><button onclick="addTask()"><img src="/Images/plus.png" id="add-button"></button>
<ul id='list'></ul></div>

And the code I have tried and works on only the 'Monday' portion:

const inputBox = document.getElementById('input-area');
const listContainer = document.getElementById('list');

function addTask() {
  if(inputBox.value === '') {
    alert('Please enter a valid value :)')
  }
  else {
    let li = document.createElement('li');
    li.innerHTML = inputBox.value;
    listContainer.appendChild(li);
    let span = document.createElement('span');
    span.innerHTML = "\u00d7";
    li.appendChild(span);
  }
  inputBox.value = '';
}

listContainer.addEventListener('click', function(e) {
  if(e.target.tagName === 'LI'){
  e.target.classList.toggle('checked');
  }
  else if(e.target.tagName === 'SPAN'){
      e.target.parentElement.remove();
  }
}, false);

What I want is for each todo to act separately, but right now only one of them is functioning.

score 0 · Accepted Answer · answered Jul 08 '23 at 17:09

You can't do that!

You duplicated the same piece of HTML, just changing monday to tuesday...

An ID is unique, you have 3 times the same IDs...

You can do that with the class instead

you select all the button inside class day
for each you add an event listener
and you put you treatment.

Once button is clicked first thing is to find the day (closest), now from this element you can find and manipulate all others elements inside this day

const clickPlus = () => {
  document.querySelectorAll('.day button').forEach(el => {
    el.addEventListener('click', evt => {
      evt.stopImmediatePropagation();
      const el_day = el.closest('.day');
      const val = el_day.querySelector('input').value;
      if (val === '') {
        alert('Please enter a valid value :)')
      } else {
        let li = document.createElement('li');
        li.innerHTML = val;
        el_day.querySelector('ul').appendChild(li);
        let span = document.createElement('span');
        span.innerHTML = "\u00d7";
        li.appendChild(span);
      }
      el_day.querySelector('input').value = '';
    })
  })
}
window.addEventListener('load', clickPlus);

<div class="day" id="monday">
  <div class="span">
    <h3 class="day-title">Monday</h3>
  </div>
  <input type="text" class="input">
  <button>+</button>
  <ul></ul>
</div>

<div class="day" id="tuesday">
  <div class="span">
    <h3 class="day-title">Tuesday</h3>
  </div>
  <input type="text" class="input">
  <button>+</button>
  <ul></ul>
</div>

<div class="day" id="wednesday">
  <div class="span">
    <h3 class="day-title">Wednesday</h3>
  </div>
  <input type="text" class="input">
  <button>+</button>
  <ul></ul>
</div>

Several todo lists on one page, how to get multiple submissions on the same page

1 Answers1