javascript中的document.getElementById循环

Question

我在html中有两个标签。 在第一个选项卡中，我有一些选项，例如textarea，选项列表，复选框...当我单击“确定”时，我希望我的应用将我选择的内容（在第一个选项卡中）显示/传输为第二个选项卡作为文本。 ”按钮。

在js脚本中，我添加了以下功能：

function myFunction() {
  var r="";
  var x="";
  var y="";
  var z="";

  var i;
  for (i=0; i++){
    var x = document.getElementById("myTextarea").value;
    var y = document.getElementById("mySelect").value;
    var z = document.getElementById("mySelect2").value;
    var r = x + " " + y +" " + z ;
  }
  document.getElementById("result").innerHTML = r;

}

结果显示在第二个选项卡中，如下所示：

<p id="result"></p>

我的问题是，它不会每次都显示在第一个选项卡中的选择，但是每次我单击“确定”按钮时，第二个选项卡都会显示我的最后一个选项。 换句话说，我希望第二个选项卡每次单击“确定”时显示所有选项。 很明显，我在循环中犯了一个错误。 那是什么

请帮我...

Answer 1

由于您只想为每次点击添加一个字符串，因此您不需要循环。 而是使用innerHTML += ...或更好的方法将内容添加到现有内容中：使用DOM方法将文本节点添加到DOM。

看起来是这样的：

 function addToResult() { var x = document.getElementById("myTextarea").value; var y = document.getElementById("mySelect").value; var z = document.getElementById("mySelect2").value; var r = x + " - " + y + " - " + z; var result = document.getElementById("result"); result.appendChild(document.createTextNode(r)); result.appendChild(document.createElement("br")); } var addButton = document.getElementById("add"); addButton.addEventListener("click", addToResult); 

 <textarea id="myTextarea"></textarea><br> <select id="mySelect"> <option>choice 1</option> <option>choice 2</option> </select> <select id="mySelect2"> <option>choice A</option> <option>choice B</option> </select><br> <button id="add">Add</button> <p id="result"></p> 

Answer 2

您可以使用insertAdjacentHTML方法添加更多内容。

 function $(selector) { return document.querySelector(selector) } function addToResult() { var x = $("#myTextarea").value; var y = $("#mySelect").value; var z = $("#mySelect2").value; var r = x + " - " + y + " - " + z; $("#result").insertAdjacentHTML('beforeend', r) } var addButton = document.getElementById("add"); addButton.addEventListener("click", addToResult); 

 <textarea id="myTextarea"></textarea><br> <select id="mySelect"> <option>choice 1</option> <option>choice 2</option> </select> <select id="mySelect2"> <option>choice A</option> <option>choice B</option> </select><br> <button id="add">Add</button> <p id="result"></p>