CODEWITHSUNDEEP
javascripthtml
notADevYet
notADevYet

Reputation: 327

JS Function to add items to an <ul> in an HTML file

I am total beginner (1 week learning this ...and already thinking about quitting before getting crazy :D) and this is my first question, so please, if I do something wrong, just let me know. I am trying to solve a small Javascript exercise about adding a list to a HTML file with a JS function.

I have created this function, but It is not working. I would say the problem is that I don't know how to indicate the bands name variable inside the ".createTextNode()" .

This is the function I have in a JS file :

function addBands() {
   for (i = 0, i < 0, i++) {
        var banda = document.createElement("LI");
        var nombre= document.createTextNode([0]);
        banda.appendChild(nombre);
        document.getElementById("band-list").appendChild(banda)
   }
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1> MY FAVORITE BANDS</h1>
    
    <ul id="band-list">
        
    </ul>
    
    <script src="exercisesJS.js"></script>
    <script>addBands(['Dire Straits', 'Kansas', 'Steely Dan'])</script>
</body>
</html>

The output should be a list with the name of the 3 bands in the Function, or any other bands (could be 3, or 6 ...etc...

Upvotes: 0

Views: 158

Answers (2)

Mitya
Mitya

Reputation: 34556

Always check the error console. It's currently telling you that

for (i = 0, i < 0, i++) {

is a syntax error. You mean:

for (i = 0; i < 0; i++) {

That fixes the syntax. However that's still logically wrong, since it means your loop will never run (since the iterator variable i starts at 0, and is told to run while it is under 0, a condition it fails right from the beginning.)

Looking at your code, there's other problems. You're passing an array of band names to the function, but the function isn't set up to receive it. So, we need:

function addBands(bands) {

That means the inner part of the function can access what was passed to it. It also means we can base our loop on the number of bands that were passed, and use the iterator band as the textual output.

function addBands(bands) { //<-- receive incoming array
    for (i = 0; i < bands.length; i++) { //iterate bands.length times
        var banda = document.createElement("LI");
        var nombre= document.createTextNode(bands[i]); //output iterator band name
        banda.appendChild(nombre);
        document.getElementById("band-list").appendChild(banda)
    }
}

While we're here, there's a couple of other optimisations we can make. Firstly, there's no sense in freshly looking up the ul element each time the loop runs. So let's cache it outside the loop. Secondly, while createTextNode() is fine, you may be interested to know that it's easier to just use textContent on the parent node. Putting it all together:

function addBands(bands) { //<-- receive incoming array
    let ul = document.getElementById("band-list"); //cache UL
    for (i = 0; i < bands.length; i++) {
        var banda = document.createElement("LI");
        banda.textContent = bands[i];
        ul.appendChild(banda)
    }
}

Upvotes: 2

Jibin Joseph
Jibin Joseph

Reputation: 1315

Refer to @Utkanos's answer to exactly understand what went wrong in your code. Given that, I suggest the following solution, which uses ES2015 .forEach method of arrays, for looping over your provided list.

function addBands(liArray) {
  liArray.forEach(liText => {
    const li = document.createElement('li')
    const liTextNode = document.createTextNode(liText)
    li.appendChild(liTextNode)
    document.getElementById("band-list").appendChild(li)
  })
}

addBands(['Dire Straits', 'Kansas', 'Steely Dan'])
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <h1> MY FAVORITE BANDS</h1>

    <ul id="band-list">

    </ul>

    <script></script>
  </body>

</html>

Upvotes: 1

Related Questions