Select all input elements that have a specific value and change their value with Javascript

Question

I dabble in Javascript for very basic tasks everyone now and then, but for the most part I'm basically a newbie. I have a page, which has multiple input elements, which all contain unique IDs, and I want to write a script that will find a collection of inputs that contain the same value, and apply a new value to all of those selected inputs. The script I have created can accomplish this by using getElementById, but this method is no good because all of my IDs are unique. I tried using getElementsByTagName('input').value, but that doesn't seem to work. The following is my code:

<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>

Do you want to check the value when the page loaded or when the user changes the input as well? — Lars Flieger, May 26 '21 at 13:35
You should try event delegation. A parent of all inputs listens for onchange. event.target will give you the element the user changed value in and e.target.value the current value. On this event compare the value with other inputs current value — Vijay Dev, May 26 '21 at 16:50

Ruan Mendes · Answer 1 · 2021-05-26T14:58:59.490

There are 3 problems:

getElementsByTagName('input') returns an array like object, you need to iterate over it.
You used the assignment operator = instead of the comparison operator ==
The last error is not causing an a problem but it should read window.onload = change_input_value instead, that assigns the change_input_value to the onload handler. You were calling change_input_value() and assigning its return (undefined) to window.onload. It worked because when your function was called, the HTML your function relied on was already rendered

<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>

@GerardvanHelden Yes, I was confused with your code and the OP's code :p Added that to the answer, explaining the 3 things the OP had done incorrectly. Thanks for the heads up, feel free to delete the comments now. — Ruan Mendes, May 26 '21 at 13:56

Gerard van Helden · Answer 2 · 2021-05-26T13:39:25.450

1

You have confused the = (assignment) and the == (equality test) operators.

Also, attaching the eventhandler to onload in the way you do assigns the result of the call to the function as the onload handler. This is not what you want, you want the function to be executed as the handler:

Replace

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

With

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

Or even better, use https://developer.mozilla.org/en-US/docs/Web/API/EventListener

edited May 26 '21 at 13:39

answered May 26 '21 at 13:36

Gerard van Helden

1,601
10
13

This is only the second half of the problem. User needs to iterate over the results of the query. – Ruan Mendes May 26 '21 at 13:39

Spectric · Answer 3 · 2021-05-26T13:47:38.580

1

Two ways:

Using .querySelectorAll() and the input[value="Original Value 2"] CSS selector which selects all input elements with the value "Original Value 2":

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">

Use .forEach() to loop through the NodeList.

Selecting all inputs and checking the values 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">

edited May 26 '21 at 13:47

answered May 26 '21 at 13:37

Spectric

30,714
6
20
43

2

@LarsFlieger The first and original solution is not the best. The `[value="..."]` selector doesn't work if the value of the input has been modified after the HTML has been loaded, that's because the value attribute of the HTML doesn't stay in sync with the `input.value` property. See https://stackoverflow.com/questions/6003819/what-is-the-difference-between-properties-and-attributes-in-html#:~:text=The%20value%20property%20reflects%20the,from%20the%20HTML%20source%20code. – Ruan Mendes May 26 '21 at 13:40
I think what @GerardvanHelden means is that this provides solutions without an English explanation of what the problem was. – Ruan Mendes May 26 '21 at 13:45
@JuanMendes Didn't know that. Depending on what OP wants it's not useful than. – Lars Flieger May 26 '21 at 13:47
1

@LarsFlieger Beyond what the OP needs, we should strive for answers that help everyone, not just the OP. – Ruan Mendes May 26 '21 at 13:51

Select all input elements that have a specific value and change their value with Javascript

3 Answers3