How to call a JavaScript function without having to write it more than once in the HTML file?

Question

Let's say I have the following HTML lines calling a JS function.

<h3>
    <span class="my-class" onclick="myFunc()">one</span>
    <span class="my-class" onclick="myFunc()">two</span>
    <span class="my-class" onclick="myFunc()">three</span>
    <span class="my-class" onclick="myFunc()">four</span>
</h3>

How can I call myFunc() right from the script without having to repeat myself by writing onclick="myFunc()" so many times in the HTML file?

Thanks in advance!

Don’t inline JS. Use `document.querySelectorAll`. Iterate through the collection. Use `Element.prototype.addEventListener('click')`. — Terry, Feb 29 '20 at 14:43

Abolfazl · Answer 1 · 2020-02-29T20:13:43.127

1

Use codes below :

var elements= document.getElementsByClassName("my-class");
for (var i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', myFunc, false);
}

edited Feb 29 '20 at 20:13

answered Feb 29 '20 at 18:32

Abolfazl

1,592
11
32

This won't work. You have `myFunc()` when what you want is `myFunc`. The second arg to `addEventListener()` must be of type 'function'; `myFunc()` is not of type 'function'; it's whatever type is returned by `myFunc()`. – avocadatoria Feb 29 '20 at 20:10

Onaapo · Answer 2 · 2020-02-29T20:29:38.373

1

I learnt what I'm coming to share in a tutorial and it works for me.

  function myFunc()
  {
    console.log('Body of myFunc');
  }

  var span_list = document.getElementsByClassName('my-class');

  for(this_span = 0; this_span < span_list.length; this_span++)
  {
     span_list[this_span].addEventListener('click', myFunc);
  }

With this method, you have access to do something peculiar to a specific element by using the 'getAttribute()' method on one of your class.

Hope this helps.

edited Feb 29 '20 at 20:29

answered Feb 29 '20 at 18:37

Onaapo

112
1
7

This won't work. As with another answer here, you have `myFunc()` when what you want is `myFunc`. The second arg to `addEventListener()` must be of type 'function'; `myFunc()` is not of type 'function'; it's whatever type is returned by `myFunc()`. – avocadatoria Feb 29 '20 at 20:13
Yeah.. that's true.. Is a typo. Thanks for the correction. – Onaapo Feb 29 '20 at 20:28

chuckx · Answer 3 · 2020-03-03T04:53:33.300

You can assign the listener to multiple elements by looping through the results of a method such as Document.querySelectorAll().

Furthermore, you can also reduce repitition in your markup by assigning the class once to the parent element. In this case, it would be the <h3> element. Then you modify your query selector accordingly.

Here's an example where I've assigned an id to each <span> element to facilitate identifying which element was clicked:

function myFunc() {
  console.log(`myFunc() called for ${this.id}`);
}

for (const e of document.querySelectorAll('h3.my-class > span')) {
  e.addEventListener('click', myFunc, false);
}

<h3 class="my-class">
  <span id="one">one</span>
  <span id="two">two</span>
  <span id="three">three</span>
  <span id="four">four</span>
</h3>

How to call a JavaScript function without having to write it more than once in the HTML file?

3 Answers3