Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • 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.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • 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?

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;
    }
}
 
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:
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>
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?
 
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>";
}
 
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!
 
Yeah, that's what I was saying here. :)
Maybe I didn't say it clearly.
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>";
}
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom