Question

例如，我有3个输入

stageGenerator

我需要得到这样的东西

<input type="text" name="color" value="blue"/>
<input type="text" name="flavor" value="acid"/>
<input type="text" name="name" value="jack"/>

我尝试使用for循环，但得到一个数组，而不是对象

const obj = {color:'blue', flavor:'acid', name:'jack};

Answer 1

使用JavaScript object代替array。要创建对象键，只需在方括号[]之间声明它并分配一个值。

var obj = {};
var x = document.querySelectorAll('input');
for (var i = 0; i < x.length; i++) {
  obj[x[i].name] = x[i].value
}
console.log(obj);

<input type="text" name="color" value="blue"/>
<input type="text" name="flavor" value="acid"/>
<input type="text" name="name" value="jack"/>

Answer 2

您应该使用具有动态属性名称的JavaScript对象：

var obj = {};
document.querySelectorAll("input").forEach(input => obj[input.name] = input.value);
console.log(obj);

<input type="text" name="color" value="blue" />
<input type="text" name="flavor" value="acid" />
<input type="text" name="name" value="jack" />

Answer 3

您可以使用forEach遍历值并更新对象。
注意：也可以使用reduce直接创建对象

const obj = {};
const inputs = document.querySelectorAll("input");
inputs.forEach(({ name, value }) => {
 obj[name] = value
})

console.log(obj);

<input type="text" name="color" value="blue" />
<input type="text" name="flavor" value="acid" />
<input type="text" name="name" value="jack" />

如何从香草JavaScript中的输入获取对象

3 个答案: