/    Sign up×
Community /Pin to ProfileBookmark

Good day sirs, the code below works well for w3school but isn’t working for me

Copy linkTweet thisAlerts:
Aug 05.2021

[code=javascript]
window.onclick = function (event) {
if ( !event.target.matches (‘.dropbutton’)) {
var dropdowns = document.getElementById (“logindropdown”);
for ( var i = 0; i < dropdowns.length; i++){
if ( dropdowns[i].classList.contains(” show”)){
dropdowns [i].classList.remove(“show”);
}
}
}
} ;
[/code]

This code isn’t running on my browser, and when I check my browser console, it doesn’t indicate that something s wrong, please I really need help



to post a comment
JavaPHP

10 Comments(s) ↴

Copy linkTweet thisAlerts:
@sibertAug 05.2021 — > @Jevis#1635098 his code isn't running on my browser

Where is the CSS code? And the HTML?
Copy linkTweet thisAlerts:
@NogDogAug 05.2021 — Added ... tags to the original post -- please be sure to use them for code blocks in future posts.
Copy linkTweet thisAlerts:
@SempervivumAug 05.2021 — Without viewing the HTML and CSS I spot this error: `document.getElementById</C> returns a <STRONG>**single**</STRONG> element which you cannot get the length of and perform a loop on.<br/>
Additionally to the HTML and CSS please post the URL of the page on w3schools.

Edit: Found the reference:<br/>
<URL url="https://www.w3schools.com/howto/howto_js_dropdown.asp">https://www.w3schools.com/howto/howto_js_dropdown.asp</URL><br/>
They are using the function <C>getElementsByClassName</C> which returns a node list instead of a single element:<br/>
<C>var dropdowns = document.getElementsByClassName("dropdown-content");`
Copy linkTweet thisAlerts:
@JevisauthorAug 06.2021 — Thanks sir. I refactored the code into this
``<i>
</i>window.onclick = function (event) {
if (!event.target.matches('.dropbtn')){
var dropdowns = document.getElementsByClassName("dropdown-content");
for ( var i = 0; i &lt; dropdowns.length; i++){
if (dropdowns [i].classList.contains('show'){
dropdowns [i].classList.remove('show');
}
}
}
}<i>
</i>`</CODE>
the function to add the class 'show' to the dropdown content element is
<CODE>`<i>
</i>function toggleDropdown (){
document.getElementById("dropdownContentId").classList.toggle("show");
}<i>
</i>`</CODE>
the CSS for the entire document is pretty long, so I just cut off the styling of the 'show' class
<CODE>`<i>
</i>. show {
display: block ;
} <i>
</i>``
this time around, the dropdown, unfortunately, won't even show up, after a click,
Copy linkTweet thisAlerts:
@JevisauthorAug 06.2021 — @NogDog#1635102 thanks a lot . Had no idea I had to
Copy linkTweet thisAlerts:
@SempervivumAug 06.2021 — @Jevis#1635148 There is a blank between the dot and "show" in your CSS. This way the element won't show up.

Fine that you noticed NogDog's posting regarding the code tags. I edited your posting again and added them.
Copy linkTweet thisAlerts:
@JevisauthorAug 06.2021 — @sibert#1635101 the HTML for the dropdown looks like this

[code

<div class ="dropdown" >

<a href="#" class="dropbtn" onclick="toggleDropdown()"><span class="fas fa-bars"></span></a>

<div class="dropdown-content">

<a href="#">Login</a>

<a beef="#">Signup</a>

</div>

</div>

.../code]

And CSS

.show {

display: block ;

}
Copy linkTweet thisAlerts:
@JevisauthorAug 06.2021 — @Sempervivum#1635151 ok sir, I would try to make it a habit, thanks a lot
Copy linkTweet thisAlerts:
@SempervivumAug 06.2021 — I fixed the errors and added remarks in the javascript. The following code works for me:
``<i>
</i> window.onclick = function (event) {
// You inserted a span for the fontawesome icon,
// therefore event.target returns that span and
// testing the class "dropbtn" doesn't match
// and the content is hidden again:
// if (!event.target.matches('.dropbtn')) {
if (!event.target.parentNode.matches('.dropbtn')) {
var dropdowns = document.getElementsByClassName("dropdown-content");
for (var i = 0; i &lt; dropdowns.length; i++) {
// if (dropdowns[i].classList.contains('show'){ closing brace missing here
if (dropdowns[i].classList.contains('show')) {
dropdowns[i].classList.remove('show');
}
}
}
}
function toggleDropdown() {
// document.getElementById("dropdownContentId").classList.toggle("show");
// There is no ID "dropdownContentId"
// Use the existing class "dropdown-content" and the function querySelector:
document.querySelector(".dropdown-content").classList.toggle("show");
}<i>
</i> `</CODE>
CSS:
<CODE> ``<i>
</i> .dropdown-content {
display: none;
}

.dropdown-content.show {
display: block;
}
``
Copy linkTweet thisAlerts:
@JevisauthorAug 07.2021 — Wow, thanks a lot sir, it really worked for me. Infact I used it in a Django template page and it worked
×

Success!

Help @Jevis spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...