JavaScript onChange () for multiple elements

Question

Is it possible to assign the same onChange () value to multiple elements (without jQuery)

I'm currently doing

var namefirst = document.getElementsByName("attribute.Identifier Source")[0];
namefirst.onchange = function () {//disable some stuff }

However, I have to do this onChange () for 5 more elements, and so I was wondering if it is possible to do this for all of them at once? Or I will have to do this for each item.

(I am very new to Javascript)

Answer 1

If you want to bind it right away, try using event delegation. ie create a shell for inputs and bind a change event to it and define an element based on the target object and do your action.

Something like that:

HTML:

<div id="wrapper">
    <input type="text" name="myText" />
    <input type="text" name="myText" />
    <input type="text" name="myText" />
    <input type="text" name="myText" />
</div>

JS:

document.getElementById('wrapper').addEventListener('change', function(event){
    var elem = event.target;
    console.log(elem.name);
    console.log(elem.tagName);
    console.log(elem.type);
    if(elem.name === "myText"){
         console.log(elem.value);
    }   
});

, , .

Fiddle

Answer 2

:

var names = document.getElementsByName("attribute.Identifier Source");
for (var i = 0; i < names.length; i++) {
    names[i].onchange = function() {
        //do stuff
    }
}

Answer 3

:

for(i=0; i<var.length; i++){
    //do stuff
}

,

, onchange, :

get=document.getElementsByName("someName");
for(i=0; i<get.length; i++){
       get[i].addEventListener("change", yourFunction, false);
   }

Answer 4

, :

function onChangeHandler() {
  // do some stuff
}

var myCollection = document.getElementsByName("attribute.Identifier Source");
for (var i=0, l=myCollection.length; i<l; i++)
  myCollection[i] = onChangeHandler;

, :

function onChangeHandler(event) {
  // some browser abstraction
  if (!event) event = window.event;
  var changedElement = event.srcElement || this;
  // do some stuff
}

var myCollection = document.getElementsByName("attribute.Identifier Source");
for (var i=0, l=myCollection.length; i<l; i++) {
  myCollection[i].addEventListener('change', onChangeHandler, false);
  /* if you want to support older MSIE, you would do some like
  var el = myCollection[i];
  if (el.addEventListener) {
    el.addEventListener('change', onChangeHandler, false);
  }
  else if (el.attachEvent) {
    el.attachEvent('onchange', onChangeHandler);
  }
  */
}

, document.getElementsByName() XHTML, document.querySelectorAll() document.getElementsByTagName()...

Answer 5

. html- :

var elems=document.querySelectorAll(".mark");
for(var i=0;i<elems.length;i++){
    elems[i].addEventListener("change", myFunction);
}

I would like to note that this method is not compatible with old browsers. For more information, go here .