how to prevent innerHTML repeating the previous value

January 26, 2022

I’m a JS learner and want to create an app that will calculate the average from input values. So far I’ve managed to push the entered input values into an array. However, when I want to display them, the previous value is repeated. So I’m near the end. But now I’m stuck. Can you lend me hand with that?

        Enter
      </button>
      <p id="numbersEntered"></p>
      <button id="avg" type="button">Average</button>
      <p id="average"></p>

   let numbersEntered = document.querySelector("#numbersEntered");
   let inputEl = document.querySelector("#input");

   // buttons
   let enter = document.querySelector("#enter");

   let numArr = [];

   enter.addEventListener("click", displayNums);

   function displayNums() {
   let newNumber = inputEl.value;
   numArr.push(newNumber);
   console.log(numArr);

   for (let i = 0; i < numArr.length; i++) {
    numbersEntered.innerHTML += numArr[i] + ",";
  }
  }

>Solution :

You can just clear the innerHTML before appending;

function displayNums() {
   let newNumber = inputEl.value;
   numArr.push(newNumber);
   numbersEntered.innerHTML = "";  //Clear the innerHTML
   for (let i = 0; i < numArr.length; i++) {
     numbersEntered.innerHTML += numArr[i] + ",";
   }
}

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML