为什么“for循环”中的“for in”不能用每个对象值更改表单元素中的每个输入值

Question

大家好！
我想制作一些function()，这对于使用每个Object值动态更改所选表单中的每个input值很有用，但遗憾的是我下面的示例代码只显示"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>