Solution 1 :

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("ControlSearchOverlay").onclick = function() {

as user4642212 mentioned it would be good to rather use addEventListener

document.getElementById("ControlSearchOverlay").addEventListener('click', function() {

Problem :

I’m adding this piece of code to attach an ID to a class ( inside a li element.

document.querySelector('').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, but not on my site…

Any ideas on what maybe wrong?

Am’I forgetting to reference any library?

Here’s my implementation:

<!DOCTYPE html>

#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;}

<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="" 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="" 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>


document.querySelector('').id = 'ControlOverlay';
document.getElementById("ControlOverlay").setAttribute("onclick", "ShowOverlay();");
function ShowOverlay(){document.getElementById("overlays").classList.toggle("standby2")}


Here’s a jsfiddle


Comment posted by small demo

Could you please create a

Comment posted by bpy

@palaѕн on the demos, it work’s! Not on my implementation…

Comment posted by Hexception

maybe you can share your implementation

Comment posted by Sebastian Simon

Without seeing the HTML, it’s not possible to tell what’s wrong. The code you’ve shown either throws an error if no

Comment posted by epascarello

Why do you have to add an id to add an event handler? You already have a reference to the element.

Comment posted by Sebastian Simon

The bottom half of the answer is neither true nor good advice. Use

Comment posted by Hexception

addEventListener is only usefull if you have more then one listener. or you are creating a libary

Comment posted by Hexception

but i can add it too

Comment posted by bpy

sorry @hexception… I didn’t put the

Comment posted by Sebastian Simon

@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.


Leave a Reply

Your email address will not be published. Required fields are marked *