选择所有具有特定值的输入元素,并使用Javascript更改其值

选择所有具有特定值的输入元素,并使用Javascript更改其值,javascript,html,getelementbyid,getelementsbytagname,Javascript,Html,Getelementbyid,Getelementsbytagname,我偶尔会涉猎Javascript,为每个人都做一些非常基本的任务,但在大多数情况下,我基本上是个新手。我有一个页面,它有多个输入元素,所有这些元素都包含唯一的ID,我想编写一个脚本,找到包含相同值的输入集合,并将新值应用于所有这些选定的输入。我创建的脚本可以通过使用getElementById实现这一点,但是这个方法不好,因为我所有的ID都是唯一的。我尝试使用getElementsByTagName('input').value,但似乎不起作用。以下是我的代码: <input type=&

我偶尔会涉猎Javascript,为每个人都做一些非常基本的任务,但在大多数情况下,我基本上是个新手。我有一个页面,它有多个输入元素,所有这些元素都包含唯一的ID,我想编写一个脚本,找到包含相同值的输入集合,并将新值应用于所有这些选定的输入。我创建的脚本可以通过使用getElementById实现这一点,但是这个方法不好,因为我所有的ID都是唯一的。我尝试使用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>




函数更改\输入\值(){ var x=document.getElementById('input-1'); 如果(x.value=‘原始值1’){ x、 值='新值1'; } } window.onload=更改输入值();
您混淆了
=
(赋值)和
=
(相等测试)运算符

另外,将eventhandler附加到
onload
的方式将调用的结果分配给函数作为
onload
处理程序。这不是您想要的,您希望函数作为处理程序执行:

替换

window.onload=foo();//执行foo,并分配返回值

window.onload=foo;//foo被分配到“window”的“onload”属性

或者更好地使用您已经混淆了
=
(赋值)和
==
(相等测试)运算符

另外,将eventhandler附加到
onload
的方式将调用的结果分配给函数作为
onload
处理程序。这不是您想要的,您希望函数作为处理程序执行:

替换

window.onload=foo();//执行foo,并分配返回值

window.onload=foo;//foo被分配到“window”的“onload”属性
或者更好地使用两种方法:

  • 使用
    .querySelectorAll()
    输入[value=“Original value 2”]
    CSS选择器,选择所有
    输入值为“
    Original value 2
    ”的元素:
函数更改\输入\值(){
var x=document.querySelectorAll('input[value=“Original value 2”]”);
x、 forEach(函数(e){
e、 值='新值1';
})
}
window.onload=更改输入值()




两种方式:

  • 使用
    .querySelectorAll()
    输入[value=“Original value 2”]
    CSS选择器,选择所有
    输入值为“
    Original value 2
    ”的元素:
函数更改\输入\值(){
var x=document.querySelectorAll('input[value=“Original value 2”]”);
x、 forEach(函数(e){
e、 值='新值1';
})
}
window.onload=更改输入值()




有三个问题:

  • getElementsByTagName('input')
    返回一个类似数组的对象,需要对其进行迭代
  • 您使用了赋值运算符
    =
    ,而不是比较运算符
    =
  • 最后一个错误没有引起问题,但应该改为读取
    window.onload=change\u input\u value
    ,将
    change\u input\u value
    分配给onload处理程序。您正在调用
    change\u input\u value()
    并将其返回值(
    undefined
    )分配给
    window.onload
    。这是因为在调用函数时,函数所依赖的HTML已经呈现




函数更改\输入\值(){ var inputs=document.getElementsByTagName('input'); for(输入的常量输入){ 如果(input.value==“原始值1”){ input.value='新值1'; } } } 更改输入值();
有三个问题:

  • getElementsByTagName('input')
    返回一个类似数组的对象,需要对其进行迭代
  • 您使用了赋值运算符
    =
    ,而不是比较运算符
    =
  • 最后一个错误没有引起问题,但应该改为读取
    window.onload=change\u input\u value
    ,将
    change\u input\u value
    分配给onload处理程序。您正在调用
    change\u input\u value()
    并将其返回值(
    undefined
    )分配给
    window.onload
    。这是因为在调用函数时,函数所依赖的HTML已经呈现




函数更改\输入\值(){ var inputs=document.getElementsByTagName('input'); for(输入的常量输入){ 如果(input.value==“原始值1”){ input.value='新值1'; } } } 更改输入值();
是否要在加载页面时或用户更改输入时检查该值?应尝试事件委派。所有输入的父级侦听onchange。event.target将为您提供用户在中更改的值,e.target.value将为当前值。在此事件中,将该值与其他输入值进行比较当前值是否要在加载页面时或用户同时更改输入时检查该值?应尝试事件委派。所有输入的父级侦听onchange。event.target将为您提供用户在中更改的值,e.target.value将为当前值。在此事件中,将该值与其他输入电流值进行比较这只是问题的后半部分。用户需要迭代查询结果。这只是问题的后半部分。用户需要迭代查询结果。@LarsFlieger第一个原始解决方案不是最佳解决方案。如果输入值已被修改,则
[value=“…”]
选择器不工作