JavaScript帮助，将用户输入值分配给数组，然后分配给UL
我是一名学生，这是我的JavaScript课程的家庭作业，我必须让下面的代码正常工作，它应该占据用户输入的五个位置，并将它们分配给一个数组。然后在页面的列表中显示它们。当我开始时，它不起作用。它目前只接受4个条目，并且只显示列表中的前3个条目。它应该有5个条目，并显示5个条目。我试图更改迭代计数器的if语句，但它仍然只占用4个位置。我怀疑有什么东西坏了，或者编号不正确。任何帮助都将不胜感激JavaScript帮助，将用户输入值分配给数组，然后分配给UL,javascript,Javascript,我是一名学生，这是我的JavaScript课程的家庭作业，我必须让下面的代码正常工作，它应该占据用户输入的五个位置，并将它们分配给一个数组。然后在页面的列表中显示它们。当我开始时，它不起作用。它目前只接受4个条目，并且只显示列表中的前3个条目。它应该有5个条目，并显示5个条目。我试图更改迭代计数器的if语句，但它仍然只占用4个位置。我怀疑有什么东西坏了，或者编号不正确。任何帮助都将不胜感激 <!DOCTYPE html> <html> <head> &l
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hands-on Project 4-3</title>
<link rel="stylesheet" href="styles.css" />
<script src="modernizr.custom.05819.js"></script>
</head>
<body>
<header>
<h1>
Hands-on Project 4-3
</h1>
</header>
<article>
<div id="results">
<p id="resultsExpl"></p>
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>
</div>
<form>
<fieldset>
<label for="placeBox" id="placeLabel">
Type the name of a place, then click Submit:
</label>
<input type="text" id="placeBox" />
</fieldset>
<fieldset>
<button type="button" id="button" onclick="processInput()">Submit</button>
</fieldset>
</form>
</article>
<script>
var places = []; // new array to store entered places
var i = 1; // counter variable to track array indexes
// function to add input to array and then generate list after 5th submission
function processInput() {
places[i] = document.getElementById("placeBox").value; // add entered value to array
document.getElementById("placeBox").value = "" // clear text box
if (i < 6) { // iterate counter variable
++i;
}
else { // add entered value to array and write results to document
document.getElementById("resultsExpl").innerHTML = "You entered the following places:";
var listItem = "";
for (j = 1; j < 6; j++) { // write each array element to its corresponding list item
listItem = "item" + j;
document.getElementById(listItem).innerHTML = places[j];
}
}
// add backward compatible event listener to Submit button
var submitButton = document.getElementById("button");
if (submitButton.addEventListener) {
submitButton.addEventListener("click", processInput, false);
} else if (submitButton.attachEvent) {
submitButton.attachEvent("onclick", processInput);
}
}
</script>
</body>
</html>
实践项目4-3
实践项目4-3
键入地点名称，然后单击提交：
提交
变量位置=[]；//用于存储输入位置的新数组
变量i=1；//跟踪数组索引的计数器变量
//函数将输入添加到数组中，然后在第5次提交后生成列表
函数processInput（）{
places[i]=document.getElementById（“placeBox”）.value；//将输入的值添加到数组中
document.getElementById（“placeBox”）.value=”“//清除文本框
if（i<6）{//迭代计数器变量
++一,；
}
else{//将输入的值添加到数组中，并将结果写入文档
document.getElementById（“ResultExpl”）.innerHTML=“您输入了以下位置：”；
var listItem=“”；
对于（j=1；j<6；j++）{//将每个数组元素写入其相应的列表项
listItem=“项目”+j；
document.getElementById（listItem）.innerHTML=places[j]；
}
}
//“将向后兼容的事件侦听器添加到提交”按钮
var submitButton=document.getElementById（“按钮”）；
if（submitButton.addEventListener）{
addEventListener（“单击”，processInput，false）；
}else if（submitButton.attachEvent）{
submitButton.attachEvent（“onclick”，processInput）；
}
}
processInput（）提交onclick=“processInput（）” // add backward compatible event listener to Submit button
var submitButton = document.getElementById("button");
if (submitButton.addEventListener) {
submitButton.addEventListener("click", processInput, false);
} else if (submitButton.attachEvent) {
submitButton.attachEvent("onclick", processInput);
}
}
onclickprocessInput（）processInput（）processInput（）processInput（）processInput（）我看到了一些其他的小问题，但是一旦修复了事件侦听器问题，您应该能够解决它们。一句忠告：在调试代码时，在某些地方添加
console.log（）