how to select/target a submit button among several buttons from html to javascript

Question

I want to select a button from a markup that contains three buttons, I tried calling the specified one directly but the code is not responding, but when I try to add the even listener on the body,obviously it takes the effect on the three buttons, which I don't like because I want to use them for special purposes like add and clear.

 <div id = "evnt-sec">
  <div class ="form-container">
    <h1>type your desired language here</h1>
    <form  id = 'task-form'>
      <div>
        <input type="text" class="type" id="task">
        <input type="submit" class="btn " value="add">
      </div>
      
    </form>
  </div>
      
    <ul>
     
    </ul>
    <div id="spa">
      <h1>type your desired language here</h1>
      <form id="task-form2">
        <input type="text" class="type filter">
        <input type="submit" class="btn " id="yes" value="clear">
      </form>
    </div>
  
  </div>
</div>

That is the html for refrence. My aim exactly is to target the first input of type submit with value of add to add some created items to the empty 'ul' tag.

//document.body.addEventListener('submit' , addTask)
const additem = document.querySelector('#task');
const form = document.querySelector('.form-container');
const filter = document.querySelector('#spa input');
const clear = document.querySelector('#spa');
const listfat = document.querySelector('#evnt-sec ul');
console.log(form);
console.log(additem);
loadEventListeners();

function loadEventListeners() {
  form.addEventListener('submit' , addTask);
  //filter.addEventListener('click' , keyUp);
 // clear.addEventListener('submit' , clearItem);
}
form.addEventListener('submit' , function(e){
  if (additem.value ===''){
  alert('no value has been passed');}
const item = document.createElement('li');
item.className = 'append';
item.appendChild(document.createTextNode(additem.value));
const link = document.createElement('a');
item.appendChild(link);
link.innerHTML = '<i class ="fa fa-remove"></i>';
console.log(item);
additem.value =' ';
listfat.appendChild(item);
e.preventDefault();
});

And that is my js code above for refrence. I tried to grab the parent by using 'form-container' but it doesn't work, by using task-form yet it doesn't work and lastly by using the body the three buttons in my markup respond which is not what I want, since the code work by adding event on the body makes me believe that probably there's nothing wrong with the "function part of code".

I think I need more explanation on how to target the button and if possible I also need an explanation why the code isn't responding properly as this will really help me.

Answer 1

my aim exactly is to target the first input of type submit with value of add

document.querySelector("input[type='submit'][value='add']").addEventListener(...)

But really, the clicking of the submit button will automatically trigger the submit event of the form, so you probably should target that instead:

document.querySelector("#task-form").addEventListener("submit", ...);

But, in actuality, your use case doesn't seem like you are actually submitting form data anywhere, in which case, you should not be using a form element in the first place, nor any submit buttons. You need regular buttons and handle their click event.

You also seem to have a lot of unnecessary code and your if condition's true block contains code that should run when the test is false.

const addItem = document.querySelector('input[type="button"][value="add"]');
const task = document.querySelector('#task');
const clear = document.querySelector('#spa');
const listfat = document.querySelector('#evnt-sec ul');

addItem.addEventListener('click' , function(e){
  if (task.value ===''){
    e.preventDefault();
    alert('no value has been passed');
  } else {
    const item = document.createElement('li');
    item.className = 'append';
    item.textContent = task.value;
    const link = document.createElement('a');
    item.appendChild(link);
    link.innerHTML = '<i class ="fa fa-remove"></i>';
    console.log(item);
    task.value ='';
    listfat.appendChild(item);
  }
});

<div id = "evnt-sec">
  <div class ="form-container">
    <h1>type your desired language here</h1>
      <div>
        <input type="text" class="type" id="task">
        <input type="button" class="btn " value="add">
      </div>   
  </div>
  <ul></ul>
  <div id="spa">
    <h1>type your desired language here</h1>
      <input type="text" class="type filter">
      <input type="button" class="btn " id="yes" value="clear">
  </div>
</div>