GetElementsById中的自动增量ID

Question

Please help me out to complete Id increment in getElementById() using loop.

<script type="text/javascript">
    document.getElementById('idA(increment)').onchange = function () {
     document.getElementById('idB(increment)').value = event.target.value
  }
</script>

instead of

<script type="text/javascript">
  document.getElementById(\'idA1\').onchange = function () {
     document.getElementById(\'idB1\').value = event.target.value
  }

  document.getElementById(\'idA2\').onchange = function () {
     document.getElementById(\'idB2\').value = event.target.value
  }

  document.getElementById(\'idA3\').onchange = function () {
     document.getElementById(\'idB3\').value = event.target.value
  }
</script>

Answer 1

You can use a css class and use document.querySelectorAll('.my-class') .

var nodes = document.querySelectorAll('.my-class');

for (var i = 0; i < nodes.length; ++i) {
  nodes[i].onchange = function() {
    // Do what you want here
  };
}

As mentionned by NewToJS, you can also do var nodes = document.getElementsByClassName('my-class') .

Answer 2

You can use a class based lookup to target all the elements and then add the change event handler

 var els = document.getElementsByClassName('id-a'); for (var i = 0; i < els.length; i++) { els[i].addEventListener('change', function() { document.getElementById(this.id.replace(/^idA/, 'idB')).value = event.target.value }); } 

 <input id="idA1" class="id-a" /> <input id="idB1" /> <br /> <input id="idA2" class="id-a" /> <input id="idB2" /> <br /> <input id="idA3" class="id-a" /> <input id="idB3" /> <br /> <input id="idA4" class="id-a" /> <input id="idB4" /> <br />