Search code examples
javascripthtmlundefinedonchangehtml-datalist

Onchange Error: undefined (setting 'value')


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>


Solution

  • 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";
        }
      }
    }