Javascript add li to ul using array

Question

I am working on a spelling game for my children, and I want to display a spelling list based on what they enter and an array that is created. Here is the link to my project on github https://github.com/urock24/myWebSite.git

Here is the code in question, javascript first

function populateSpellList() {      
    // for loop should run through spelling list array and create list items in "listSpelling"

    for (var i = 0; i < spellingList.length; i++ ) {
        // create a new li
        var newLI = document.createElement("li");
        var indSpellingWord = spellingList[i];

        // grab the spelling list item 
        var newContent = document.createTextNode(indSpellingWord);

        // add the spelling list item to the li
        newLI.appendChild(newContent);

        // get the unordered list and add the new li
        var displaySpellList = document.getElementById("listSpelling");     

        displaySpellList.appendChild(newLI);
    }   
}

And the HTML

<div id = "theSpellingList">

            <h3>The Spelling List</h3>
            <ul id = "listSpelling">
               <li>test </li>
            </ul>

        </div>

I can get an alert to pop up for me after every line in the function except the last, and it only seems to pop up once. But no matter what happens it is not displaying any list items in that list.

I have seen a lot of jquery examples on here so I am definitely going to be pursuing learning jquery, but for now "plain" javascript would be great.

And how do you call it? (I doubt anyone is going to go through all those files to find the code) — epascarello
– epascarello, Commented Jan 29, 2015 at 1:46
From a search of your github for "spellingList" it appears it is never set to any list, as in @Barmar's fiddle. — Paul
– Paul, Commented Jan 29, 2015 at 2:03

Oleksandr Karpov · Accepted Answer · 2015-01-29 02:17:35Z

4

From what I can see, you're trying to insert elements into the document which is embeded via iFrame. But you can't do this that simple. The thing is that when you call document.getElementById from the parent (not iframe) window, it tries to find an element within parent window. But iFrame is a separate window.

You can try following.

In every specific game html file:

<body>
  <!-- SOME CONTENT HERE -->

  <!-- RIGHT BEFORE `BODY` CLOSE -->
  <script>
    // This will run your code once document is loaded.
    window.onload = function () {
        // run the createName function
        createName();
        // run the createList function 
        createList();
        //play game
        playGame(target);
    };
  </script>
</body>

In learningGames.js:

function populateSpellList() {  

    // for loop should run through spelling list array and create list items in "listSpelling"
    var i;
    for (i = 0; i < spellingList.length; i++ ) {

        var newLI = document.createElement("li"), // create a new li
            displaySpellList = document.getElementById("listSpelling"), // cache the unordered list
            newContent = document.createTextNode(spellingList[i]); // grab the spelling list item

        // add the spelling list item to the li
        newLI.appendChild(newContent);

        displaySpellList.appendChild(newLI);
    }
}

function gameWindow(target) {
    // set the iframe html to the target html 
    document.getElementById('game_frame').src = target;
}

Hope it is exactly what you need.

answered Jan 29, 2015 at 2:17

Oleksandr Karpov

6344 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

urock24 Over a year ago

I can't vote this up, but thank you for taking time to look at the code and recognize the iframe issue, that totally fixed it.

Multihunter · Accepted Answer · 2019-03-20 06:42:40Z

More of a comment than answer, your basic code seems to work fine with some added test data. Below are some suggestions on making the code a little more concise:

<script>

// List of words
var spellingList = ['foo','bar','fum'];

function populateSpellList() {

  // Get list once and store reference
  var list = document.getElementById("listSpelling");

  // Declare variables once, near top is good
  var li;

  // for loop should run through spelling list array and create list items in "listSpelling"
  for (var i = 0; i < spellingList.length; i++ ) {

    // Create new LI
    li = document.createElement("li");

    // Append the spelling word
    li.appendChild(document.createTextNode(spellingList[i]));

    // Add to list
    list.appendChild(li);
  }
}

// Call the function when the document is ready
window.onload = populateSpellList;
</script>

<div id = "theSpellingList">
  <h3>The Spelling List</h3>
  <ul id = "listSpelling">
    <li>test </li>
  </ul>
</div>

You can do the above in fewer lines of code, however it becomes a bit unmanageable. Less code isn't always "better".

Roko C. Buljan · Accepted Answer · 2022-02-10 17:32:12Z

1

Pass your array items as argument to your function
Use Element.insertAdjacentHTML() with the "beforeend" arg
Use Array.prototype.reduce() to reduce an array to a String HTML

const populateSpellList = (items) => { 
  document.querySelector("#listSpelling").insertAdjacentHTML(
    "beforeend",
    items.reduce((acc, item) => acc += `<li>${item}</li>`, "")
  );
};

populateSpellList(["Word1", "Word2", "Word3"]);

<ul id="listSpelling"><li>test</li></ul>

edited Feb 10, 2022 at 17:32

answered Jan 29, 2015 at 2:02

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

pizzarob · Accepted Answer · 2015-01-29 01:58:02Z

0

You could do this. Make sure your JS is placed after the HTML, or put it in a window.onload function.

var listEl = document.getElementById('listSpelling');

var spellingList = ['word1', 'word2', 'word3', 'word4'];

var populateList = function(arr){
    var str = '';
    for(var i = 0; i < arr.length; i++){
        str += '<li>' + arr[i] + '</li>';
    }
    return str;
}

listEl.innerHTML = populateList(spellingList);

Fiddle

answered Jan 29, 2015 at 1:58

pizzarob

12.1k7 gold badges51 silver badges70 bronze badges

Collectives™ on Stack Overflow

Javascript add li to ul using array

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related