选择具有特定值的所有输入元素，并使用Javascript更改它们的值

Question

我偶尔会尝试Javascript来完成非常基本的任务，但在大多数情况下，我基本上是一个新手。我有一个页面，它有多个输入元素，每个元素都包含唯一的ID，我想编写一个脚本，该脚本将查找包含相同值的输入的集合，并将新值应用于所有这些选定的输入。我创建的脚本可以通过使用getElementById来完成此任务，但是这种方法并不好，因为我的所有is都是惟一的。我尝试使用getElementsByTagName('input').value，但似乎不起作用。以下是我的代码：

<input type="text" value="Original Value 1" id="input-1">
<br>
<input type="text" value="Original Value 1" id="input-2">
<br>
<input type="text" value="Original Value 2" id="input-3">
<br>
<input type="text" value="Original Value 2" id="input-4">

<script>
function change_input_value(){
var x = document.getElementById('input-1');
if(x.value = 'Original Value 1'){
x.value = 'New Value 1';
}
}

window.onload = change_input_value();
</script>

Answer 1

有3个问题：

• getElementsByTagName('input')返回一个类似object的数组，你需要遍历它。==
• The
• 你使用了赋值运算符=而不是比较运算符
• 不会导致a问题，但它应该读取window.onload = change_input_value，这会将change_input_value赋值给onload处理程序。您正在调用change_input_value()并将其返回(undefined)赋值给window.onload。它之所以有效，是因为当您的函数被调用时，您的函数所依赖的HTML已经呈现为

​

<input type="text" value="Original Value 1" id="input-1">
<br>
<input type="text" value="Original Value 1" id="input-2">
<br>
<input type="text" value="Original Value 2" id="input-3">
<br>
<input type="text" value="Original Value 2" id="input-4">

<script>
  function change_input_value() {
    var inputs = document.getElementsByTagName('input');
    for (const input of inputs) {
      if (input.value == 'Original Value 1') {
        input.value = 'New Value 1';
      }
    }
  }

  change_input_value();
</script>

​

Answer 2

您混淆了= (赋值)和== (相等性测试)运算符。

此外，以您所做的方式将eventhandler附加到onload会将调用结果分配给作为onload处理程序的函数。这不是您想要的，您希望函数作为处理程序执行：

替换

window.onload = foo(); // foo gets executed, return value is assigned

使用

window.onload = foo; // foo gets assigned to 'onload' property of 'window'

或者更好的方法是使用https://developer.mozilla.org/en-US/docs/Web/API/EventListener

Answer 3

两种方式：

使用.querySelectorAll()的

• 和选择值为"Original Value 2":

的所有input元素的input[value="Original Value 2"] CSS选择器

​

function change_input_value() {
  var x = document.querySelectorAll('input[value="Original Value 2"]');
  x.forEach(function(e) {
    e.value = 'New Value 1';
  })
}
window.onload = change_input_value();

<input type="text" value="Original Value 1" id="input-1">
<br>
<input type="text" value="Original Value 1" id="input-2">
<br>
<input type="text" value="Original Value 2" id="input-3">
<br>
<input type="text" value="Original Value 2" id="input-4">

​

使用.forEach()遍历NodeList。

选择所有输入并检查值correspondingly，然后进行

​

function change_input_value() {
  var x = document.getElementsByTagName("input");
  for (let i = 0; i < x.length; i++) {
    let e = x[i];
    if (e.value == 'Original Value 2') {
      e.value = 'New Value 1';
    }
  }
}

window.onload = change_input_value();

<input type="text" value="Original Value 1" id="input-1">
<br>
<input type="text" value="Original Value 1" id="input-2">
<br>
<input type="text" value="Original Value 2" id="input-3">
<br>
<input type="text" value="Original Value 2" id="input-4">

​