Add simple event to each element in Javascript

Question

I am trying to add events dynamically to each element in my html, using data-* I get all elements and using forEach to iterate. But when I trigger events in any button, it returns in page the undefined value, it looks like it's lost the reference from this inside function, I really don't know what happened. Is the best approach to add events dynamically?

https://jsfiddle.net/tmmdsgoq/1/

<button data-event data-text="Button 1">Button 1</button>
<button data-event data-text="Button 2">Button 2</button>
<button data-event data-text="Button 3">Button 3</button>

<div id="container">

</div>

<script>
function init(){
 var elements = document.querySelectorAll("[data-event]");  
 elements.forEach(function(el){
  el.addEventListener("click", function(){
   document.querySelector("#container").innerHTML += this.text;
  });
 });
}

init();

</script>

You've asked a lot of questions and never marked any as correct? Theres a green tick next to all answers that you are meant to select to help others. Heres a helpful link for you stackoverflow.com/help/someone-answers — Mark
– Mark, Commented Aug 9, 2016 at 1:03

woxxom · Accepted Answer · 2016-07-19 19:04:22Z

1

Use textContent property instead of text, thus eliminating the need for data-text.
Only several types of HTML elements support text property according to HTML5 specification: <title>, <a>, <option>, <script>, <body>.
Beware document.querySelectorAll result may not have forEach method in older browsers.
Use devtools (F12 key) debugger to inspect the values by setting a breakpoint inside the loop.

edited Jul 19, 2016 at 19:04

answered Jul 19, 2016 at 18:53

woxxom

75.2k15 gold badges161 silver badges164 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicola Pedretti · Accepted Answer · 2016-07-19 19:01:37Z

To grab a value stored in a data-* property you need to access the dataset of the html element.

So your code would change from:

document.querySelector("#container").innerHTML += this.text;

To:

document.querySelector("#container").innerHTML += this.dataset.text;

Also, I would not use the data element as a selector--it is not their purpose --but rather a class element.

Your code is:

<button data-event data-text="Button 1">Button 1</button>
...
var elements = document.querySelectorAll("[data-event]");

And should be:

<button class="className" data-text="Button 1">Button 1</button>
...
var elements = document.getElementsByClassName("className");

Final Consideration, try out JQuery, it will make your life easier and your code nicer :)

kamoroso94 · Accepted Answer · 2016-07-19 19:36:36Z

0

The text property you're trying to access doesn't exist. You simply need to change this.text to this.getAttribute("data-text").

answered Jul 19, 2016 at 19:36

kamoroso94

1,7351 gold badge16 silver badges19 bronze badges

Collectives™ on Stack Overflow

Add simple event to each element in Javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related