How to add to event listeners in javascript

Question

I am trying to add two event listeners to a grocery list to learn javascript. I want to add one on keydown for the enter key and one for blur when I click off the input. The problem is when I try and add both it comes up with an error saying the keydown has already been handled with the blur and wont let me do both. This is my code, suggestions and help much appreciated.

Thank you

et myList = ["bananas", "milk", "apples", "eggs", "cake"];
const btnAdd = document.querySelector("#addNew");
const output = document.querySelector(".output");
const newItem = document.querySelector("#addItem")
btnAdd.addEventListener("click", function () {
  console.log("clicked");
  if (newItem.value) {
    myList.push(newItem.value);
    newItem.value = "";
  }
  build();
})


window.onload = build;

function build() {
  output.innerHTML = "<h2>My List</h2>";
  const tbl = document.createElement("table");
  for (let i = 0; i < myList.length; i++) {

    // List
    const row = document.createElement("tr");
    row.ind = i;
    const cell1 = document.createElement("td");
    cell1.innerHTML = myList[i];
    cell1.classList.add("todo" + i);
    row.appendChild(cell1);

    // Checkbox
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.classList.add("checkbox" + i);
    checkbox.onchange = crossOut;
    row.appendChild(checkbox);

    function crossOut() {
      let completed = document.querySelector(".todo" + i);
      if (this.checked) {
        completed.style.textDecoration = "line-through";
      } else {
        completed.style.textDecoration = "none";
      }
    }



    // delete button
    const cell2 = document.createElement("td");
    const span1 = document.createElement("span");
    span1.innerText = "Delete";
    span1.addEventListener("click", function () {
      //console.log(myList[i]);
      //let temp = this.closest("tr").ind;
      let itemOut = myList.splice(i, 1);
      // This will find what item is at i and remove 1 item
      //console.log(myList);
      build();
    })
    cell2.appendChild(span1);

    // 
    const span2 = document.createElement("span");
    span2.innerText = "Edit";
    span2.addEventListener("click", function () {
      row.style.backgroundColor = "Yellow";
      let tempEle = row.firstElementChild;
      const newInput = document.createElement("input");
      newInput.value = tempEle.innerText;
      tempEle.innerText = "";
      tempEle.appendChild(newInput);
      newInput.focus();


      newInput.addEventListener("keydown", function (e) {
        if (e.keyCode == 13) {
          tempEle.innerHTML = newInput.value;
          row.style.backgroundColor = "White";
          myList[i] = newInput.value;
        }
      })

      // newInput.addEventListener("blur", function (e) {
      //   tempEle.innerHTML = newInput.value;
      //   row.style.backgroundColor = "White";
      //   myList[i] = newInput.value;
      // })
      // console.log(tempEle);

    })
    cell2.appendChild(span2);
    row.appendChild(cell2)
    tbl.appendChild(row);

  }
  output.appendChild(tbl);


}

Answer 1

You will need to use the keydown event listener for when you press the key down, Then you will have to isolate the keyCode for the whichever key. After that you will have to do the same for keyup but use.mouse0 as the keycode I'm sorry I cant write it out for you but I hope this helps.

Edit: If you look up how to use keyup, keydown and look up what the key code is you should easily be able to work it out. I've only done it using jquery and not in vanilla JS. Its done basically the same way