How to migrate a .change function from jQuery to plain Javascript

Question

I'm not a JS expert but i think what i'm trying to do is pretty simple (at least in jQuery)

I've got 3 select

  <select id="faq" class="onchance_fill">...</select>
  <select id="pages" class="onchance_fill">...</select>
  <select id="faq" class="onchance_fill">...</select>

and an input (it's a tinyMCE one in advlink plugin)

<input type="text" onchange="selectByValue(this.form,'linklisthref',this.value);" value="" class="mceFocus" name="href" id="href" style="width: 260px;">

I want that each time i change a value in one of the 3 select, that this value of the option, will be placed in the input.

In Jquery, it would be something like :

$('.ajax_onchance_fill').change(function() {
        data = $('.ajax_onchance_fill').val();
        $('#href').text(data);
    });

But i can't use it. So what is the equivalent in plain Javascript ?

Thanks

Answer 1

I would advice you keep using Jquery as it speeds up this kind of thing but in pure JavaScript i think what you want looks something like this...

 <script type="text/javascript">
  function load() {
  var elements = document.getElementsByClassName('onchance_fill');
  for(e in elements){
      elements[e].onchange = function(){
          document.getElementById('href').value = this.value;
     }       
  }
  }
</script>