在 javascript 中循环 document.getElementById答案

【问题标题】：Loop for document.getElementById in javascript在 javascript 中循环 document.getElementById
【发布时间】：2017-11-19 22:58:53
【问题描述】：

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

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

请帮帮我……

【问题讨论】：

1. for 循环未完成 - 缺少 while/until 子句； 2. 如果有一个直到子句，r 被一遍又一遍地计算； 3 为什么要循环？您没有在任何地方使用 i - 您可以在第二个 var r 之后删除 var r=""; var x=""; var y=""; var z=""; var i; for (i=0; i++){ 和 }
如果你声明了一次变量，那么你不需要再次声明它。例如在您的代码中var r="" 声明两次。
这样会更好：function myFunction() { document.getElementById("result").innerHTML= document.getElementById("myTextarea").value +" "+ document.getElementById("mySelect").value +" "+ document.getElementById("mySelect2").value; }
谢谢，但这段代码每次只显示我的新选项，并用新选项替换我以前的选项。我希望它每次都显示所有选项。
换句话说，我想每次在第一个选项卡中单击“确定”时获取结果，而不删除以前的结果。像这样：结果（第一次）结果（第二次）结果（第三次）............（......）

标签： javascript loops innerhtml getelementbyid

【解决方案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>

【讨论】：

非常感谢！！！效果很好！还有别的......如果我想选择显示在第二个选项卡中的一些寄存器（例如通过使用复选框勾选它们），以便删除它们，是否可能？我需要什么？
是的，有可能，但是你应该首先尝试，使用document.createElement('input'); 创建复选框，然后将类型属性设置为checkbox，使用setAttribute，然后绑定一个点击处理程序使用addEventListener("click", ...)，最后使用elem.removeChild(...) 再次删除该元素。查找这些方法并先尝试。如果你真的被卡住了，请针对特定问题提出一个新问题。

【解决方案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>

【讨论】：