Question

我正在为我的孩子们制作拼写游戏，我想根据他们输入的内容和创建的数组显示拼写列表。这是我在github https://github.com/urock24/myWebSite.git

上的项目的链接

这是有问题的代码，首先是javascript

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);
    }   
}

和HTML

<div id = "theSpellingList">

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

        </div>

除了最后一行之外，我可以在函数的每一行之后为我弹出一个警告，它似乎只弹出一次。但无论发生什么，它都不会在该列表中显示任何列表项。

我在这里看到了很多jquery示例，所以我肯定会继续学习jquery，但是现在“普通”的javascript会很棒。

Answer 1

从我所看到的，您正在尝试将元素插入到通过iFrame嵌入的文档中。但你不能这么简单。问题是当你从父（不是iframe）窗口调用document.getElementById时，它会尝试在父窗口中找到一个元素。但是iFrame是一个单独的窗口。

您可以尝试以下。

在每个特定游戏html 文件中：

<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>

在 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;
}

希望这正是你所需要的。

Answer 2

更多的评论而非答案，您的基本代码似乎可以正常使用一些添加的测试数据。以下是一些使代码更简洁的建议：

<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>

你可以用更少的代码行完成上述工作，但是它变得有点难以管理。更少的代码并不总是＆＃34;更好＆＃34;。

Answer 3

你可以这样做。确保你的JS放在HTML之后，或者把它放在window.onload函数中。

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

Answer 4

function populateSpellList( arr ) {                 // Pass the Array as argument.
  var UL = document.getElementById("listSpelling"), // Get UL outside of the loop.
      LI = "";
  for (var i=0; i<arr.length; i++) {
    LI += '<li>'+ arr[i] +'</li>';                  // concatenate LIs inside the loop.
  }
  UL.insertAdjacentHTML('beforeend', LI);
}

populateSpellList( [ "Word1", "Word2", "Word3" ] );

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

https://developer.mozilla.org/en-US/docs/Web/API/Element.insertAdjacentHTML

Javascript使用数组将li添加到ul

4 个答案: