为什么 "for循环 "中的 "for in "不能改变表单元素中的每个输入值和每个对象的值？

Question

大家好! 我想做一些 function() 对改变每个 input 动态地以选定的形式对每个 Object 值，但遗憾的是我下面的示例代码只显示了 "pineapple"

document.getElementById("change-val").addEventListener("click", function(event) {
  let dataObj = {
    fruit1: "melon",
    fruit2: "mango",
    fruit3: "pineapple"
  };
  let FormInput = document.getElementsByTagName("input");

  for (let index = 0; index < FormInput.length; index++) {
      for (let keyObj in dataObj) {
          FormInput[index].value = dataObj[keyObj];       
      }
  }
});

<button id="change-val">Change Value</button>
<form>
  <input type="text" value="apple"/>
  <input type="text" value="watermelon"/>
  <input type="text" value="banana"/>
</form>

Answer 1

你不应该使用嵌套循环。使用一个循环来获取相应的属性与索引。

你可以使用 Object.values() 得到一个属性值的数组。

document.getElementById("change-val").addEventListener("click", function(event) {
  let dataObj = {
    fruit1: "melon",
    fruit2: "mango",
    fruit3: "pineapple"
  };
  let FormInput = document.getElementsByTagName("input");
  let fruits = Object.values(dataObj);

  for (let index = 0; index < FormInput.length; index++) {
    FormInput[index].value = fruits[index];
  }
});

<button id="change-val">Change Value</button>
<form>
  <input type="text" value="apple" />
  <input type="text" value="watermelon" />
  <input type="text" value="banana" />
</form>