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

由于您只想为每次点击添加字符串，因此您不需要循环。而是使用public class CustomSpinner extends Spinner { public CustomSpinner(Context context) { super(context); } public CustomSpinner(Context context, AttributeSet attrs) { super(context, attrs); } public CustomSpinner(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); } @Override public void setSelection(int position, boolean animate) { boolean sameSelected = position == getSelectedItemPosition(); super.setSelection(position, animate); if (sameSelected) { // Spinner does not call the OnItemSelectedListener if the same item is selected, so do it manually now getOnItemSelectedListener().onItemSelected(this, getSelectedView(), position, getSelectedItemId()); } } @Override public void setSelection(int position) { boolean sameSelected = position == getSelectedItemPosition(); super.setSelection(position); if (sameSelected) { // Spinner does not call the OnItemSelectedListener if the same item is selected, so do it manually now getOnItemSelectedListener().onItemSelected(this, getSelectedView(), position, getSelectedItemId()); } } }或更好的内容向现有内容添加内容：使用DOM方法将文本节点添加到DOM。

以下是这样的看法：

＆＃13;

innerHTML += ...

＆＃13;

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);

＆＃13;

Answer 2

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

＆＃13;

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);

＆＃13;

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

＆＃13;

在javascript中循环使用document.getElementById

2 个答案: