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] + ",";
}
}
Instead of appending numArr to innerHTML, simply overwrite it instead. Also, since you're only writing plain text, it is recommended to use textContent instead of innerHTML:
function displayNums() {
let newNumber = inputEl.value;
numArr.push(newNumber);
console.log(numArr);
numbersEntered.textContent = numArr.join(', ');
}
There is no need to use a for loop when you can use Array.prototype.join to print the array out.
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