Using JS to apply CSS when clicking buttons

Question

I am using a modal that when clicked it should popup full screen. Everything is good, modal pops full screen but the header ( logo + menu ) still shows up.

I'm trying to use JS, so when the modal is clicked i want to apply a z-index to the header and when the close button is clicked i will apply another z-index to fix the header.

the link to be clicked is this:

<a class="vPlay vPlay-btn clickformodal" href="#modal-our-work-1" data-toggle="modal" data-video="241737557"><img src="/wp-content/uploads/2018/04/play1.png" /></a>

Now the JS code is this:

let open = document.selectElementByClassName("clickformodal"); let header = document.selectElementByClassName("mk-header"); let close = document.selectElementByClassName("close"); open.addEventListener('click', function () { header.classList.add("headerbefore"); }); close.addEventListener('click', function () { header.classList.remove("headerafter"); });

And this is the css that will be applied:

.headerbefore { z-index: 1; } .headerafter { z-index: 301; }

The issue here appart that it's not doing what it is supposed too, google chrome shows an error in console saying that let open = document.selectElementByClassName("clickformodal"); is not a function.

What am i doing wrong here?

Help me out please, it's been 2 days that i'm trying to fix this and nothing till now :/

Thanks!!!

xake · Accepted Answer · 2018-04-20 04:45:17Z

There are 2 things going wrong here:

it should be getElementsByClassName, not selectElementByClassName
as getElementsByClassName returns an element collection, you need to add [0] at its end, e.g. document.getElementsByClassName("clickformodal")[0]

let open = document.getElementsByClassName("clickformodal")[0]; let header = document.getElementsByClassName("mk-header")[0]; let close = document.getElementsByClassName("close")[0]; open.addEventListener('click', function () { header.classList.add("headerbefore"); }); close.addEventListener('click', function () { header.classList.remove("headerafter"); });

An option could be to use querySelector() instead

let open = document.querySelector(".clickformodal"); let header = document.querySelector(".mk-header"); let close = document.querySelector(".close"); open.addEventListener('click', function () { header.classList.add("headerbefore"); }); close.addEventListener('click', function () { header.classList.remove("headerafter"); });

If to add to more than 1, use querySelectorAll() (this sample assume there is as many open as close but only 1 header)

let open = document.querySelectorAll(".clickformodal"); let header = document.querySelector(".mk-header"); let close = document.querySelectorAll(".close"); for (var i = 0; i < open.length; i++) { open[i].addEventListener('click', function () { header.classList.add("headerbefore"); }); } for (var j=0; j < close.length; j++) { close[j].addEventListener('click', function () { header.classList.remove("headerbefore"); }); }

@xake Maybe you should do remove("headerbefore"); instead of remove("headerafter");
u are the man! Thank you very much! I hope you have a very nice evening just like mine right now :)))
is there any reason why this JS works great when clicking on 1 modal but when clicking on the second modal it won't work? What do you think it could cause this?
@xake If you mean you have 2, or more, such modal elements, then yes. The above code sample only finds the first. To find more than 1 you need to use e.g. querySelectorAll() and then loop through the result attaching a listener on each.
Hmm, how do i create the loop ? Wouldn't it work if i have the same classes for all the modules i have as i have around 10 @LGSon

Collectives™ on Stack Overflow

Using JS to apply CSS when clicking buttons

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Related