如何在循环中更改getElementById的参数答案

【问题标题】：How to change the parameters of getElementById in a loop如何在循环中更改getElementById的参数
【发布时间】：2017-12-11 14:03:34
【问题描述】：

我正在处理一个表单，我想在不使用重置的情况下单独重置行。如何使用循环改变JavaScript中getElementById方法的参数传递的属性值？下面是我的源代码示例：

<script>
         var element = document.getElementById('#re');
    element.addEventListener('click', function() {
        document.getElementById("#id1").value = "";
        document.getElementById("#id2").value = "";
        document.getElementById("#id3").value = "";
    });
</script>

【问题讨论】：

for(var i=1; i

标签： javascript javascript-objects dom-events

【解决方案1】：

假设您的 ID 具有示例中显示的格式：

for (var i = 1; i <= 3; i++) {
  document.getElementById("id" + i).value = "";
}

如果不是这样，但您知道每个元素的 ID，您可以将所有 ID 放入一个数组并使用它：

var elementIds = ["id1", "id2", "id3"];
elementIds.forEach(function(id) {
  document.getElementById(id).value = "";
});

另一个解决方案是给所有你想要重置的元素一个特定的类和目标：

var elements = document.getElementsByClassName("resetable-element");
[].slice.call(elements).forEach(function(element) {
  element.value = "";
});

【讨论】：

【解决方案2】：

您可以通过输入循环而不是使用 ID，例如：

var inputs = document.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) {
  inputs[i].value = "";
}

【讨论】：

【解决方案3】：

对于您的简单示例，您可以遍历值 1 - 3（我假设 ID 中的 # 是错字？）：

for(var i = 1; i <= 3; i++) {
   document.getElementById('id' + i).value = '';
}

如果您可以通过其他名称（例如类名）来识别元素，您可能更愿意对其进行迭代：

var elements = document.querySelectorAll('.field');
Array.prototype.slice.call(elements).forEach(function(element) {
   element.value = '';
});

【讨论】：