problem with document querySelector implementation

Question

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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" 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

Could you please create a [small demo](https://stackoverflow.com/help/minimal-reproducible-example) for this using [jsfiddle](https://jsfiddle.net/) or [snippet](https://meta.stackoverflow.com/a/358993/1823841) here to show the issue happening. — palaѕн, Jun 24 '20 at 13:41
@palaѕн on the demos, it work's! Not on my implementation... — bpy, Jun 24 '20 at 13:43
It can be one of a billion things wrong, hard to randomly guess. Like playing darts blindfolded. Might get a bullseye or might hit someone in the rear. — epascarello, Jun 24 '20 at 13:45
Without seeing the HTML, it’s not possible to tell what’s wrong. The code you’ve shown either throws an error if no `
Ok, which means that code is working fine. There must be some issue with setup on your end, which is very hard for us to debug as we don't have any access to your site. You have to check the audit logs and stuff to figure out the issue. — palaѕн, Jun 24 '20 at 13:46
Use the [browser console (dev tools)](https://webmasters.stackexchange.com/q/8525) (hit `F12`) and read any errors. Is your ` — Sebastian Simon, Jun 24 '20 at 13:48
Oops, I meant _`defer` attribute_ in my previous comment. Also, I’d recommend you to abandon W3Schools and go with a more reputable learning resource like [MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/) instead. — Sebastian Simon, Jun 24 '20 at 13:52
@bpy Your code is working. Inspect the elements on your page. You’ll see a `

Hexception · Answer 1 · 2020-06-24T14:09:26.797

-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("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")
})

edited Jun 24 '20 at 14:09

answered Jun 24 '20 at 13:57

Hexception

453
3
15

The bottom half of the answer is neither true nor good advice. Use `addEventListener`, not the `onclick` property. No, you do not have to declare the function beforehand. – Sebastian Simon Jun 24 '20 at 14:01
addEventListener is only usefull if you have more then one listener. or you are creating a libary – Hexception Jun 24 '20 at 14:01
but i can add it too – Hexception Jun 24 '20 at 14:02
sorry @hexception... I didn't put the `overlay` `div` on the code. The question is updated. Thanks! – bpy Jun 24 '20 at 14:02
@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. – Sebastian Simon Jun 24 '20 at 14:06
So yes I agree with you but I would just improve the setAttribute – Hexception Jun 24 '20 at 14:07
@bpy is your problem solved or you just missed the div by asking the question? – Hexception Jun 24 '20 at 14:08
@Hexception still unsolved. Missed the `div` when asking... – bpy Jun 24 '20 at 14:10
now you are calling ShowOverlay(); and there is only a function called ShowHideOverlay – Hexception Jun 24 '20 at 14:10
@bpy Please try using the [debugging capabilities](https://developer.mozilla.org/en-US/docs/Mozilla/Debugging/Debugging_JavaScript) of your browser yourself, then edit your question with a _clear_ problem description. – Sebastian Simon Jun 24 '20 at 14:19
The program is still calling ShowOverlay but only a function called ShowHideOverlay exists – Hexception Jun 24 '20 at 14:27
@Hexception there's no more `ShowHideOverlay` in my `code` example. Please check my `fiddle` or `code` example – bpy Jun 24 '20 at 14:30
document.getElementById("ControlOverlay").setAttribute("onclick", "ShowOverlay();"); function ShowHideOverlay(){document.getElementById("overlays").classList.toggle("standby2")} – Hexception Jun 24 '20 at 14:31
@bpy So what is your _actual_ problem now? Have you read any of the error messages in the console? – Sebastian Simon Jun 24 '20 at 14:33
If you dont see any error message you have to TRIGGER it by clicking on your search item – Hexception Jun 24 '20 at 14:34

problem with document querySelector implementation

1 Answers1