Why is my keyup event executing after every value

Question

I am creating a program in javascript where a user inputs items into their shopping list and it displays it into a list. I have made a keyup event Listener to execute whenever the enter key is released using its keyCode of 13. However, the eventListener executes whenever I release any key on my keyboard.

//This is a program that acts as a grocery list for the user.
//It has 4 hard coded average grocery items on the list already, but these can be deleted 
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");

displayList = (arr) => {
  let items = arr.forEach(item => {
    let li = document.createElement("li");
    li.textContent = item;
    list1.appendChild(li)
  })
}

displayList(myArray)

addListItem = (arr) => {
  let newItem = document.getElementById("input").value;

  if (newItem === "") {
    alert("Please enter a value if you wish to add something to your list.")
  } else if (newItem != "") {
    arr.push(newItem);
    list1.innerHTML = "";
    displayList(myArray)
  }

  input.value = "";

}

input.addEventListener("keyup", (event) => {
  if (event.keyCode === 13) {
    return;
  }
  addListItem(myArray)
})

<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<div class="container">
  <h2>Shopping List</h2>

  <div class="header">
    <input type="text" id="input" placeholder="Item">
    <span onclick="addListItem(myArray)" id="addBtn"><button>Add Item</button></span>
  </div>

  <ul id="itemList">



  </ul>

</div>

Answer 1

Your test is wrong. you reject the enter and use all the rest. It should be if (event.keyCode !== 13) { but you do not need a key event listener at all. Just submit a form

I removed the passing around of the myArray, it is not necessary and I remove the span around the button and made it a submit button

Hitting enter or clicking the button will submit the form and the event.preventDefault() will stop the actual submission

//This is a program that acts as a grocery list for the user.
//It has 4 hard coded average grocery items on the list already, but these can be deleted 
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");

displayList = () => {
  let items = myArray.forEach(item => {
    let li = document.createElement("li");
    li.textContent = item;
    list1.appendChild(li)
  })
}
displayList()

addListItem = (event) => {
  event.preventDefault(); // stop submission
  let newItem = document.getElementById("input").value;
  if (newItem === "") {
    alert("Please enter a value if you wish to add something to your list.")
  } else if (newItem != "") {
    myArray.push(newItem);
    list1.innerHTML = "";
    displayList()
  }
  input.value = "";
}
document.getElementById("myForm").addEventListener("submit", addListItem);

<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<div class="container">
  <h2>Shopping List</h2>
  <form id="myForm">
  <div class="header">
    <input type="text" id="input" placeholder="Item">
    <button type="submit">Add Item</button>
  </div>
  </form>
  <ul id="itemList"></ul>
</div>

Answer 2

Just change your last line of js function to this

input.addEventListener("keyup", (event) => {
  if (event.keyCode === 13) {
    addListItem(myArray);
  }
  
})

Answer 3

Just a 1 line change would solve the issue.

//This is a program that acts as a grocery list for the user.
//It has 4 hard coded average grocery items on the list already, but these can be deleted 
let myArray = ["Sugar", "Milk", "Bread", "Apples"];
let list1 = document.querySelector("#itemList");

displayList = (arr) => {
  let items = arr.forEach(item => {
    let li = document.createElement("li");
    li.textContent = item;
    list1.appendChild(li)
  })
}

displayList(myArray)

addListItem = (arr) => {
  let newItem = document.getElementById("input").value;

  if (newItem === "") {
    alert("Please enter a value if you wish to add something to your list.")
  } else if (newItem != "") {
    arr.push(newItem);
    list1.innerHTML = "";
    displayList(myArray)
  }

  input.value = "";

}

input.addEventListener("keyup", (event) => {
  if (event.keyCode === 13) {
    addListItem(myArray)        
  }
  return;
})

<link href="https://fonts.googleapis.com/css2?family=Nunito&display=swap" rel="stylesheet">
<div class="container">
  <h2>Shopping List</h2>

  <div class="header">
    <input type="text" id="input" placeholder="Item">
    <span onclick="addListItem(myArray)" id="addBtn"><button>Add Item</button></span>
  </div>

  <ul id="itemList">



  </ul>

</div>