来自任意数量输入的JavaScript对象(JavaScript Object from any amount of inputs)

我是JavaScript和类似的新手，我有一个问题。 在我的网站上，用户可以创建任意数量的输入 。 现在，每个新添加的输入组都有2个边（名称和值）。 我需要将它们放入JavaScript 对象中 ，就像这样：

输入字段具有相同的名称，因此我可以使用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>
I'm pretty new to JavaScript and similar and I have a problem. On my site, the user can create any amount of inputs. Now, Every newly added input group has 2 sides (name and value). I need to get those into a JavaScript object, just like that:
 
{
  "texture1" : "block/texture",
  "texture2" : "block/texture"
}
 
The input fields have the same names, so I can get them using document.getElementsByName("textureName") and document.getElementsByName("textureValue").
 
I might be able to loop through the indexes of those objects (because they give the whole outerHTML-tag instead of their values), but I don't know how to do that correctly.
 
By the way, the HTML-code itself looks similar to that (just that users can insert any amount of that):
 
<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 ），而不是返回列表。 
Thank you for your answers! Anyway, I managed to find a solution myself, before I read your solutions:
 
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);
}