Почему "for in" inside "for l oop" не может изменять каждое входное значение в элементе формы с каждым значением объекта - PullRequest
Новая
       15

Почему "for in" inside "for l oop" не может изменять каждое входное значение в элементе формы с каждым значением объекта

0 голосов
/ 17 июня 2020

Привет всем!
Я хочу создать несколько 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>

1 Ответ

1 голос
/ 17 июня 2020

Вы не должны использовать вложенные циклы. Используйте один l oop, который получает соответствующее свойство с индексом.

Вы можете использовать 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>
...