Onchange Error: undefined (setting 'value')

Question

I am asking for help, I have a problem because I get this error "Uncaught TypeError: Cannot set properties of undefined (setting 'value')" on my console. I can't use document.getElementByID because my ID will change, it must be class. Could someone help me what needs to be changed in this code?

function information(ele){
 
for(var i=0; i<30; i++){
 var address1 = document.getElementsByClassName('test2')[i];

  if( ele.value == "test4"){
    address1.value = "test5";
  } else if (ele.value == "test6"){
    address1.value = "test7";
  } else if (ele.value == "test8"){
    address1.value = "test9";
  }
}
}

<div class="form grup information">
  <lable for="dates-full.names"> Names full</lable>
  <input name="dates-full.names" list="dates-full.names" type="text"
    class="form grup test1" onchange="information(this)">
  <datalist type="text" id="dates-full.names">
    <option value="test4">
    <option value="test6">
    <option value="test8">
  </datalist>
</div>


<div class="form grup test2">
  <lable for="power-full.adress"> Adress full</lable>
  <input id="test2" name="dates-full.adress" list="dates-full.adress" type="text"
  class="form grup test2">
  <datalist type="text" id="dates-full.adress">
    <option value="test5">
    <option value="test7">
    <option value="test9">
  </datalist>
</div>

You're assuming you have 30 elements with the class `test2`, but you don't. Also you're calling the class selector and retrieving all those elements for each iteration of your loop. — skara9, Dec 06 '21 at 20:41

Tharteon · Answer 1 · 2021-12-07T09:04:53.953

1

There are no 30 elements with class name 'test2'. In your for loop, you iterate over 30 possible elements, and then you search for the nth element with class name 'test2'. Yet there might be less than 30 elements. Iterating over non existent elements.

A possible solution to this would be to do a foreach instead of a for. Iterating over all the elements.

Try these: For-each over an array in JavaScript

edited Dec 07 '21 at 09:04

answered Dec 06 '21 at 21:24

Tharteon

58
6

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 07 '21 at 02:09
Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 07 '21 at 10:02

score 0 · Accepted Answer · answered Dec 07 '21 at 10:01

Try this:

function information(ele){
  var address1 = document.getElementsByClassName('test2');
  for(var i=0; i<address1.length; i++){
    if( ele.value == "test4"){
      address1[i].value = "test5";
    } else if (ele.value == "test6"){
      address1[i].value = "test7";
    } else if (ele.value == "test8"){
      address1[i].value = "test9";
    }
  }
}

Onchange Error: undefined (setting 'value')

2 Answers2