• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How do I loop through an array and display each item in the HTML page on a new line?

P

pc510

Coder
Hi, I am new to JS from Python. I am trying to create a To Do List in JS, and I am trying to loop over an array that contains the added items. I want each item in the array to appear on a new line in the web app. The best I can get is for the items to be displayed like this

item1,item2,item3

I want them to appear as:

item1
item2
item3

Here is the function I am using for the loop


Code: 
function displayListItems() {
    for (const item of toDoList) {
        h3textItems.innerText = toDoList;
    }
}
 
Sort by date Sort by votes
O

OldMan

King Coder
Without the function and the missing html code - which you forgot.
Code: 
<body>
    <div id="h3textItems"></div>
<script>
    let toDoList = ['help', 'end', '
    let toDoList = ['help', 'end', 'poverty']
']
   
    for ( item of toDoList) {
        h3textItems.innerHTML += item + "<br>";
    }
</script>
</body>
 
Last edited:
Upvote 0 Downvote
P

pc510

Coder
OldMan said:
Without the function and the missing html code - which you forgot.
Code: 
<body>
    <div id="h3textItems"></div>
<script>
    let toDoList = ['help', 'end', 'slavery']
   
    for ( item of toDoList) {
        h3textItems.innerHTML += item + "<br>";
    }
</script>
</body>
Click to expand...
Thank you for your reply. Sorry, I should have included the rest of the code. I am grabbing the h3textItems element from the HTML already.

This is working, but it doesn't remove the previous content in the h3textItems div.

It is appearing as:

item1
item1
item2
item1
item2
item3

Is there a way to get it to erase the previous contents of the h3textItems div whenever the code is run so that I don't have duplicate items on the list?
 
Upvote 0 Downvote
Johna

Johna

Full-Stack Web Developer
Staff Team
Guardian
You probably put it in the for loop.
Do this:

JavaScript: 
let toDoList = ['help', 'end', 'poverty'];
h3textItems.innerHTML = '';

for (item of toDoList) {
  h3textItems.innerHTML += item + "<br>";
}
 
Upvote 0 Downvote
P

pc510

Coder
Thanks for all the help with this. I have solved the problem! Basically I was putting the code to clear the space in the wrong place in the code. I needed to put the following line of code BEFORE the for loop.

Code: 
h3textItems.innerHTML = " "


Thanks for all the help!
 
Upvote 0 Downvote
Johna

Johna

Full-Stack Web Developer
Staff Team
Guardian
Yeah, that's what I was saying here. :)
Maybe I didn't say it clearly.
Johna said:
You probably put it in the for loop.
Do this:

JavaScript: 
let toDoList = ['help', 'end', 'poverty'];
h3textItems.innerHTML = '';

for (item of toDoList) {
  h3textItems.innerHTML += item + "<br>";
}
Click to expand...
 
Upvote 0 Downvote
Top