从任意数量的输入获取JavaScript对象

JavaScript Object from any amount of inputs

本文关键字：获取 JavaScript 对象 输入 任意数      更新时间：2023-09-26

我很新的JavaScript和类似的，我有一个问题。在我的网站上，用户可以创建任意数量的输入。现在，每个新添加的输入组都有两个面(名称和值)。我需要把它们放到JavaScript 对象中，就像这样:

{
  "texture1" : "block/texture",
  "texture2" : "block/texture"
}

输入字段具有相同的名称，因此我可以使用document.getElementsByName("textureName")和document.getElementsByName("textureValue")来获取它们。

我可能能够循环遍历这些对象的索引(因为它们给出了整个outerhtml标记，而不是它们的值)，但我不知道如何正确地做到这一点。

顺便说一下，html代码本身看起来与此类似(只是用户可以插入任意数量的代码): 
<div class="left">
  <div class="option">Name:<br><input name="textureName" value="particle"></div>
</div>
<div class="right">
  <div class="option">Value:<br><input name="textureValue" value="block/name"></div>
</div>

getElementsByName给出了元素对象的集合，而不是它们的outerHTML。其中，HTMLInputElements将具有value属性，即输入的值。

因为你正在使用并行集合，你可以通过循环它们来构建你的对象，正如你所建议的那样，使用"name"的值作为属性的名称，使用"value"的值作为值:

var names = documents.getElementsByName("textureName");
var values = documents.getElementsByName("textureValues");
if (names.length !== values.length) {
    // Something's wrong somewhere
}
var index;
var obj = {};
for (index = 0; index < names.length; ++index) {
    obj[names[index].value] = values[index].value;
}

这是有效的，因为在JavaScript中，您可以使用点符号和属性名称文字(obj.foo)或使用括号符号和属性名称字符串 (obj["foo"])访问属性。所以在上面的代码中，我们使用的是后者。

虽然getElementsByName的工作，是完全适合您的用例，我只是提一下，你也有querySelectorAll可用(在所有现代浏览器，也IE8)。这使您可以使用任何有效的CSS选择器选择元素，这使您可以更精确地选择元素，而无需在HTML中添加额外的标记属性和类等。同样，您可能在这里不需要它，但对于将来的参考很有用。querySelectorAll可以在document上使用，也可以在单个元素上使用，只在它们的后代中搜索。还有querySelector，而不是返回一个列表，返回第一个匹配(或null没有匹配)。

谢谢你的回答!无论如何，在我阅读你的解决方案之前，我自己设法找到了一个解决方案:

var elementsCount = document.getElementsByName("name").length;
var textureName, textureValue, texturePair = {};
for (var i = 0; i<=elementsCount; i++) {
   textureName = document.getElementsByName("textureName")[i].value;
   textureValue = document.getElementsByName("textureValue")[i].value;
   texturePair[textureName] = textureValue;
   console.log(i);
   console.log(texturePair);
}
相关文章：