javascript: call function by classname

Question

Trying to create a script that is bound by className and calls another function.

I have this code working for first instance of className, but if I remove the [0] in the first line of the script it no longer works.

  <input type="text" value="NOTBound" class="NOTBound"/>
  <input type="text" value="Bound value 1" class="Bound"/>
  <input type="text" value="NOTBound" class="NOTBound"/>
  <input type="text" value="Bound value 2" class="Bound"/>
  <script>
  inputBound = document.getElementsByClassName('Bound')[0];
  inputBound.onfocus = function() {
      var input = this.value;
      formFunct(input);
  }
  function formFunct(input) {
      console.log('done did the form Funct: ' + input)
  }
  </script>

How do I get it to work for all inputs with className="Bound"? I do not need a jQuery solution.

Thank you.

you have to iterate through all of them (there are two great answers below, but you can also use a regular **for** loop) (getElementsByClassName returns an array), unless you want to use a javascript library that does that for you. — briosheje, Jun 22 '16 at 10:34
You need to loop through `document.getElementsByClassName('Bound')` and apply the `onfocus` event for each element in the list. — Spencer Wieczorek, Jun 22 '16 at 10:35
Really appreciate everyone jumping in so quickly. Thank you to all! — david, Jun 22 '16 at 10:59

score 7 · Accepted Answer · edited May 23 '17 at 11:52

7

Use a loop to iterate all elements.

Use Array#forEach, forEach() method executes a provided function once per array element.

Another alternate could to use Array.from over HTMLCollection returned by getElementsByClassName so that you can invoke Array# methods directly over returned result.

var inputBound = document.getElementsByClassName('Bound');
[].forEach.call(inputBound, function(inputBound) {
  inputBound.onfocus = function() {
    var input = this.value;
    formFunct(input);
  }
})

function formFunct(input) {
  console.log('done did the form Funct: ' + input)
}

<input type="text" value="NOTBound" class="NOTBound" />
<input type="text" value="Bound value 1" class="Bound" />
<input type="text" value="NOTBound" class="NOTBound" />
<input type="text" value="Bound value 2" class="Bound" />

Notes:

Refer What does [].forEach.call() do in JavaScript? to understand [].forEach.call.
As suggested in comments, you can use for-loop as well to iterate HTMLCollection.
As far as Browser compatibility is concerned, one could use Polyfill

edited May 23 '17 at 11:52

Community

1
1

answered Jun 22 '16 at 10:34

Rayon

36,219
4
49
76

1

That's a clever use of `.call`. Perhaps it's quite advanced for the OP (else he wouldn't have asked that), but it definetly is the best answer out there, great approach. – briosheje Jun 22 '16 at 10:35
Or just a normal for loop, would be faster and supported by all browsers. – Spencer Wieczorek Jun 22 '16 at 10:36
@briosheje, I have added a note about that.. Thanks ;) – Rayon Jun 22 '16 at 10:40
Fascinating. It'll take me a while to wrap my head around this one. Thank you. – david Jun 22 '16 at 10:58

score 3 · Answer 2 · answered Jun 22 '16 at 10:35

Iterate over NodeList and attach event handler to the element.

// get all elements and convert to array
Array.from(document.getElementsByClassName('Bound'))
  // iterate overa array elements
  .forEach(function(ele) {
    // bind event handler
    ele.onfocus = function() {
      var input = this.value;
      formFunct(input);
    }
  });

function formFunct(input) {
  console.log('done did the form Funct: ' + input)
}

<input type="text" value="NOTBound" class="NOTBound" />
<input type="text" value="Bound value 1" class="Bound" />
<input type="text" value="NOTBound" class="NOTBound" />
<input type="text" value="Bound value 2" class="Bound" />

I really like this one. Simple and understandable. Thank you. — david, Jun 22 '16 at 10:54

score 3 · Answer 3 · answered Jun 22 '16 at 10:38

simply iterate all the Node(s) in a NodeList (with a good old for-loop :))

inputBounds = document.getElementsByClassName('Bound');
for( var counter = 0; counter < inputBounds.length; inputBounds++ )
{
  inputBounds.item( counter ).onfocus = function() {
      var input = this.value;
      formFunct(input);
  }   
}

javascript: call function by classname

3 Answers3

Linked