document.getElementsByClassName().onclick with dynamic elements

Question

I am creating a Javascript program where I would like to make styling changes to an element by its class name. There are multiple elements with this class name but I want to target the one that is clicked. These are dynamically created.

The reason I have not pasted my code is because I do not want an answer based on what I am doing, I just want to know how to do this.

Sorry if this is confusing in any way.

I know I can use but I want to figure out how to use only js to solve the problem. — Fishbird DD, Oct 24 '18 at 22:10
Possible duplicate of [How to Call a JS function using OnClick event](https://stackoverflow.com/questions/21477717/how-to-call-a-js-function-using-onclick-event) — PM 77-1, Oct 24 '18 at 22:13

null · Answer 1 · 2018-10-24T22:20:56.027

0

Use querySelectorAll to get all elements and add event listener. In callback function event argument has target property which is the element that is clicked.

document.querySelector('.className').addEventListener(event => {
    // event.target is the element that is clicked
});

edited Oct 24 '18 at 22:20

answered Oct 24 '18 at 22:12

null

844
3
9
23

Uncaught TypeError: document.querySelectorAll(...).addEventListener is not a function – Fishbird DD Oct 24 '18 at 22:16
@FishbirdDD we need to see your code it's ridiculous to expect an answer to resolve your question without knowing what you have done. – zer00ne Oct 24 '18 at 22:18
In face you do not even need loop just replace `querySelectorAll` with `querySelector`. – null Oct 24 '18 at 22:22

Walialu · Answer 2 · 2018-10-24T22:29:02.957

This iterates over all elements with the class-name .your-class-goes-here and adds an onclick event handler to them which simply logs the element itself to the console.

document.querySelectorAll('.your-class-goes-here').forEach((el) => el.addEventListener("click", function(){console.log(this);}));

For browser backwards compatibility (down to IE8) reasons:

var els = document.querySelectorAll('.your-class-goes-here'),
    i = 0,
    backwards = false,
    len = els.length;

for(; i< len; i++) {
    var el = els[i];
    if (i === 0) {
        if (!el.addEventListener) backwards = true;
    }
    if (backwards) {
        el.attachEvent("click", function(evt){alert("hey");});
    } else {
        el.addEventListener("click", function(evt){alert("hey");});
    }
}

score 0 · Answer 3 · answered Oct 24 '18 at 22:27

You can try the following:

const buttons = [].slice.call(document.getElementsByClassName('someclass'))


function classToggler(classToAssign, e) {
  e.target.classList.toggle(classToAssign)
}
buttons.forEach(button => {
  button.addEventListener('click', e => classToggler('classToAssign', e))
})

.classToAssign {
  background: black;
  color: #fff;
}

<button class="someclass">Click me 1</button>
<button class="someclass">Click me 2</button>
<button class="someclass">Click me 3</button>
<button class="someclass">Click me 4</button>
<button class="someclass">Click me 5</button>

Which resumed is:

Collecting all the buttons with certain class and making them an iterable array
Creating a function that toggles a specific class that you can pass as argument
Adding a click event listener to each button passing also the click event so you can target just that specific button

score 0 · Answer 4 · answered Mar 19 '21 at 11:57

Thanks Mel Macaluso.

My problem was that the .classToAssign was added to my inner Tag (h4).

<button class="someclass"><h4>Click me 3</h4></button>

The solution was to add a css for the inner tag to disable pointer-events:

.someclass h4 {pointer-events: none;}

document.getElementsByClassName().onclick with dynamic elements

4 Answers4