javascript - 在 javascript 中循环 document.getElementById

Question

我有两个 html 选项卡。在第一个选项卡中，我有一些选项，例如文本区域、选项列表、复选框......当我单击“确定”按钮时，我希望我的应用程序将我选择的任何内容(在第一个选项卡中)作为文本显示/传输到第二个选项卡。

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

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

请帮助我...

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>