我正在为我的孩子们制作拼写游戏，我想根据他们输入的内容和创建的数组显示拼写列表。这是我在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会很棒。
从我所看到的，您正在尝试将元素插入到通过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;
}
希望它正是您所需要的。
更多的评论而非答案，您的基本代码似乎与一些添加的测试数据一起正常工作。以下是一些使代码更简洁的建议：
<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>
你可以用更少的代码行完成上述工作，但是它变得有点难以管理。更少的代码并不总是“更好”。
你可以做到这一点。确保您的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);
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