Javascript for loop getElementsByName

Question

I need to fill in the second column with value 50 when the CheckBox is checked and with value 0 when the CheckBox is unchecked.
I seems that document.getElementsByName("val" + i).value doesn't work properly or I missed something.

EDIT I replaced document.getElementsByName("val" + i)[0].value with document.getElementsByName("val" + i).value and I introduce if condition inside the loop

function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var table = document.getElementById("myTable");
  var i;

  
    for (i = 0; i < table.rows.length; i++) {
        if (checkBox.checked == true) {
            document.getElementsByName("val" + i)[0].value  = "50";
        } else {
            document.getElementsByName("val" + i)[0].value  = "0";
        }
    }
  
}

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

Checkbox: <input type="checkbox" id="myCheck" onclick="myFunction()">

<table id="myTable">
  <tr>
    <th>Interval</th>
    <th>Valori</th>
  </tr>
  <tr>
    <td>Int 1</td>
    <td><input name="val1" value size="5"></td>
  </tr>
  <tr>
    <td>Int 2</td>
    <td><input name="val2" value size="5"></td>
  </tr>
  <tr>
    <td>Int 3</td>
    <td><input name="val3" value size="5"></td>
  </tr>
  <tr>
    <td>Int 4</td>
    <td><input name="val4" value size="5"></td>
  </tr>
  <tr>
    <td>Int 5</td>
    <td><input name="val5" value size="5"></td>
  </tr>
</table>

firstly, your `if` statement should either be inside your for loop, or you should have a for loop on your else — developer, May 06 '20 at 15:20
See the docs: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName "The getElementsByName() method of the Document object returns a **NodeList Collection** of elements with a given name in the document." — PM 77-1, May 06 '20 at 15:20
@PM77-1 - your else refers to the variable `i` incremented by the for loop in a different scope, so this will have the value of 0 or table.rows.length-1 in the else block — developer, May 06 '20 at 15:22
https://stackoverflow.com/questions/7816863/how-to-use-document-getelementbyname-and-getelementbytag — PM 77-1, May 06 '20 at 15:27
@developer Your're right and I've done this but still doesn't work — BOB, May 06 '20 at 15:27
because secondly, elements can have same name so when you get them by name you get a collection. use an id instead, and get by id — developer, May 06 '20 at 15:28
@developer In my project this is how is done with `name` without `id` — BOB, May 06 '20 at 15:29
you can have an `id` too, `name` attr is primarily for the post back. but if you just want to use `name` - then you should unwrap the collection like this: `document.getElementsByName("val" + i)[0]` to unwrap, but this will only work if you have just one element with that name — developer, May 06 '20 at 15:31
This works: `getElementsByName("val1")[0].value` but when I put in for loop it doesn't work anymore when I change `1` with `+i` — BOB, May 06 '20 at 15:36
im not sure of you latest code, so ill post an answer if you think it will help - or update your question?? — developer, May 06 '20 at 15:37
note that in: `getElementsByName("val" + i)[0]` the index inside `[0]` shouldn't be `i` it should be a `0` always, but your `"val" + i` is correct, it should use i — developer, May 06 '20 at 15:40
glad it's working - I wasnt able to post an answer as it was marked as duplicate - not sure how `@Always Sunny` did - must be a reputation thing — developer, May 06 '20 at 15:47

A l w a y s S u n n y · Accepted Answer · 2020-05-06T15:46:03.813

I think this is what you need. You have several issues with your current code.

You've 6 elements on your table including the first tr <tr>th>Interval</th><th>Valori</th></tr> so you need to start from i = 1; not i = 0;
document.getElementsByName returns a NodeList of elements. And a NodeList of elements does not have a .value property. So you've to use the index [0] before accessing it.
As you said you want zero when it is not checked so you need window.onload = myFunction;, it will help you to set initially all the column as zero value.
Slightly modify your checkBox.checked condition so you can set 50 on the check and 0 on uncheck.

function myFunction() {
  var checkBox = document.getElementById("myCheck");
  var table = document.getElementById("myTable");
  var i;

  for (i = 1; i < table.rows.length; i++) {
    if (checkBox.checked == true) {
      document.getElementsByName("val" + i)[0].value = 50;
    } else {
      document.getElementsByName("val" + i)[0].value = 0;
    }
  }
}

window.onload = myFunction;

<html>

<body>

  <head>
    <style>
      table,
      th,
      td {
        border: 1px solid black;
        border-collapse: collapse;
      }
    </style>
  </head>

  Checkbox: <input type="checkbox" id="myCheck" onchange="myFunction()">

  <table id="myTable">
    <tr>
      <th>Interval</th>
      <th>Valori</th>
    </tr>
    <tr>
      <td>Int 1</td>
      <td><input name="val1" size="5"></td>
    </tr>
    <tr>
      <td>Int 2</td>
      <td><input name="val2" size="5"></td>
    </tr>
    <tr>
      <td>Int 3</td>
      <td><input name="val3" size="5"></td>
    </tr>
    <tr>
      <td>Int 4</td>
      <td><input name="val4" size="5"></td>
    </tr>
    <tr>
      <td>Int 5</td>
      <td><input name="val5" size="5"></td>
    </tr>
  </table>




</body>

</html>

Javascript for loop getElementsByName

1 Answers1