将用户输入加载到数组中然后显示

Question

尝试从HTML表单获取用户输入，然后将其输入javascript中的数组中。然后将其作为列表输出回HTML的div标签中。

该代码有效，但是它输出文本两次，而不是一次。

示例：用户以HTML格式输入orange，然后输入apple，然后输入banana

我的代码将其输出：orange, orange, apple, orange, apple, banana

它应该只输出：orange, apple, banana

// global variable
var enteredStringsArray = [];

function listArray() {
 "use strict";
 var form;
 var enteredText;
 var enteredString;
 var index;

 form = document.getElementById("lab06");
 enteredText = form.text.value;

 enteredStringsArray.push(enteredText);

 enteredString = document.getElementById("theOrderedList");

 for (index = 0; index < enteredStringsArray.length; index++) {
  enteredString.innerHTML += "<li>" + enteredStringsArray[index] + "  </li>";
 }

 return false;
}

<form id="list" action="#" onsubmit="return listArray();">
	<label>Text:</label>
	<input type="text" id="textId" name="text" />
	<br/>
	<input type="submit" name="runForm" value="submit" />
</form>
<div id="outputDiv" class="Output">
	<ol id="theOrderedList"></ol>
</div>

Answer 1

您可以尝试不使用forloop，只需创建新的 li 元素并将其添加到您的 ol

// global variable
var enteredStringsArray = [];
function lab06firstArrays() {
    "use strict";
    var enteredText;
    enteredText = document.getElementById("textId").value;
    enteredStringsArray.push(enteredText);
    console.log(enteredStringsArray);
    var ul = document.getElementById("theOrderedList");
    var li = document.createElement("li");
    li.appendChild(document.createTextNode(enteredText));
    ul.appendChild(li);
    document.getElementById("textId").value= "";
    return false;
}

<form id="lab06" action="#" onsubmit="return lab06firstArrays();">
<label>Text:</label>
<input type="text" id="textId" name="text" />
<br/>
<input type="submit" name="runForm" value="submit" />
</form>
<br/>
<div id="outputDiv" class="Output">
  <ol id="theOrderedList"></ol>
</div>

编辑：

使用forloop：

// global variable
var enteredStringsArray = [];
function lab06firstArrays() {
    "use strict";
    var enteredText;
    enteredText = document.getElementById("textId").value;
    enteredStringsArray.push(enteredText);
    //console.log(enteredStringsArray);
     var ul = document.getElementById("theOrderedList");
    for (var i= enteredStringsArray.length - 1; i < enteredStringsArray.length; i++)
    {
      var li = document.createElement("li");
    li.appendChild(document.createTextNode(enteredText));
    ul.appendChild(li);
    document.getElementById("textId").value= "";
    }
    return false;
}

<form id="lab06" action="#" onsubmit="return lab06firstArrays();">
<label>Text:</label>
<input type="text" id="textId" name="text" />
<br/>
<input type="submit" name="runForm" value="submit" />
</form>
<br/>
<div id="outputDiv" class="Output">
  <ol id="theOrderedList"></ol>
</div>

Answer 2

替换

for (index = 0; index < enteredStringsArray.length; index++) {
        enteredString.innerHTML += "<li>" + enteredStringsArray[index] + " 
        </li>";
    } 

来自

enteredString.innerHTML += "<li>" + enteredText + "</li>";

它将起作用。逐个添加每个输入项。无需循环。