如何将JavaScript数组选中元素赋值给Form表单Input输入框用于提交

问题原因 #

你原代码中使用的innerHTML是用于修改DOM节点的内部HTML内容，仅对有闭合结构的容器标签（比如div、p等）生效。input是单标签表单元素，它的展示内容存储在value属性中，所以调整标签后原来的赋值逻辑失效。

修改方案 #

只需要改动两处代码即可实现需求：

1. JS逻辑中将innerHTML赋值改为value赋值
2. HTML中将原来的div标签替换为你需要的input标签

修改后完整代码 #

JS代码

var target = document.getElementById('target');
var counter = 0;
var myText = [
  "Orange",
  "Avocados",
  "Banana",
  "Berry",
  "Apple"
];

function nextText() {
  counter += 1;
  if (counter > myText.length - 1) {
    counter = 0;
  }
  // 这里把innerHTML改成value
  target.value = myText[counter];
}

HTML代码

<div>
  <!-- 把原来的div替换为input，初始value和原来的div默认内容一致即可 -->
  <input id="target" value="Fruits">
</div>
<input type="button" onclick="nextText()" value="change Text" />

可选优化 #

如果你不希望用户手动修改这个输入框的内容，可以给input加上readonly属性，提交表单时该值仍会正常提交：

<input id="target" value="Fruits" readonly>

内容的提问来源于stack exchange，提问作者akintundeal