DOM innerText keeps showing just the last element of an array

user_15500393 0
Viewed 43
fruitsButton.addEventListener("click", function () {
    fruitsArray.forEach((fruit) => {
        newParagraph.innerText = `I'll buy a ${fruit} next year `;
        screenToShow.append(newParagraph);
    });
});

I want my code to loop each individual element and show the text but when i try doing it keeps showing just the last element of the array, i tried to using the console and it works but on DOM it does not really work so pls help

dom html javascript
2 Answers

newParagraph.innerText += I'll buy a ${fruit} next year Add += to append multiple elements see my addition above

user_155003410

You are using the same newParagraph every time, replacing the current innerText instead of adding a new paragraph.

You can create a new p element for every fruit in the loop:

const screenToShow = document.getElementById('screen')
const fruitsArray = ['apple', 'banana', 'cranberry']

fruitsArray.forEach(fruit => {
  const newParagraph = document.createElement('p')
  newParagraph.innerText = `I'll buy a ${fruit} next year`
  screenToShow.append(newParagraph)
})
<div id='screen'></div>

user_36051900
Related