The problem is on document.getElementById("overlay")
You don’t have an element with the id overlay in your HTML.
I would also edit
document.getElementById("ControlSearchOverlay").setAttribute("onclick", "ShowHideOverlay();");
function ShowHideOverlay(){
document.getElementById("overlay").classList.toggle("standby")
}
to:
document.getElementById("ControlSearchOverlay").onclick = function() {
document.getElementById("overlay").classList.toggle("standby")
}
as user4642212 mentioned it would be good to rather use addEventListener
https://developer.mozilla.org/de/docs/Web/API/EventTarget/addEventListener
document.getElementById("ControlSearchOverlay").addEventListener('click', function() {
document.getElementById("overlay").classList.toggle("standby")
})
I’m adding this piece of code to attach an ID to a class (li.search) inside a li element.
document.querySelector('li.search').id = 'ControlOverlay';
It works on some of my sites, but on a recent installation, it doesn’t attach the ID to the class.
My implentation works when I test it on w3schools.com, but not on my site…
Any ideas on what maybe wrong?
Am’I forgetting to reference any library?
Here’s my implementation:
<!DOCTYPE html>
<html>
<style>
#overlays {position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;background:rgba(110, 173, 238,.9);}
.standby2 {display:none;}
ul {list-style:none;}
</style>
<body>
<ul class="menu">
<li class="search"><a aria-label="Open" href="#"><span class="gp-icon icon-search"><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns_xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
<path fill-rule="evenodd" clip-rule="evenodd" d="M208 48c-88.366 0-160 71.634-160 160s71.634 160 160 160 160-71.634 160-160S296.366 48 208 48zM0 208C0 93.125 93.125 0 208 0s208 93.125 208 208c0 48.741-16.765 93.566-44.843 129.024l133.826 134.018c9.366 9.379 9.355 24.575-.025 33.941-9.379 9.366-24.575 9.355-33.941-.025L337.238 370.987C301.747 399.167 256.839 416 208 416 93.125 416 0 322.875 0 208z"></path>
</svg><svg viewBox="0 0 512 512" aria-hidden="true" role="img" version="1.1" xmlns_xlink="http://www.w3.org/1999/xlink" width="1em" height="1em">
<path d="M71.029 71.029c9.373-9.372 24.569-9.372 33.942 0L256 222.059l151.029-151.03c9.373-9.372 24.569-9.372 33.942 0 9.372 9.373 9.372 24.569 0 33.942L289.941 256l151.03 151.029c9.372 9.373 9.372 24.569 0 33.942-9.373 9.372-24.569 9.372-33.942 0L256 289.941l-151.029 151.03c-9.373 9.372-24.569 9.372-33.942 0-9.372-9.373-9.372-24.569 0-33.942L222.059 256 71.029 104.971c-9.372-9.373-9.372-24.569 0-33.942z"></path>
</svg></span></a></li> </ul>
<script>
document.querySelector('li.search').id = 'ControlOverlay';
document.getElementById("ControlOverlay").setAttribute("onclick", "ShowOverlay();");
function ShowOverlay(){document.getElementById("overlays").classList.toggle("standby2")}
</script>
Here’s a jsfiddle
Without seeing the HTML, it’s not possible to tell what’s wrong. The code you’ve shown either throws an error if no
Why do you have to add an id to add an event handler? You already have a reference to the element.
The bottom half of the answer is neither true nor good advice. Use
addEventListener is only usefull if you have more then one listener. or you are creating a libary
@Hexception Or event delegation. Or when you need to control the bubbling or capturing behavior. Or if you want to easily control that your event listener should only fire once. Or if you just want to write future-proof, maintainable code.
