We Keep Coding

div needs to be clicked twice to trigger event listener js

When I click on the .current-pet-icon div, I need to click it twice before it shows my menu. but every subsequent click after is okay. Just when I refresh / load the page the first time I need to double click. Any help wpuld be greatly appreciated!
Javascript
const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');
menuToggle.addEventListener('click', () => {
if (openedNav.style.display === "none") {
openedNav.style.display = "block";
shadowNav.style.display = "block";
} else {
openedNav.style.display = "none";
shadowNav.style.display = "none";
}
});
shadowNav.addEventListener('click', () => {
if (openedNav.style.display = "block") {
openedNav.style.display = "none";
shadowNav.style.display = "none";
}
});
HTML
<div class="pet-icon-container">
<img class="current-pet-icon" src="https://www.burgesspetcare.com/wp-content/uploads/2021/08/Hamster.jpg" alt="current pet icon">
</div>

Assuming that there is a CSS style assigned to hide both .nav-popout and .shadow-nav elements initially then a modified version of the original js code appears to function as expected.
const menuToggle = document.querySelector('.current-pet-icon')
const openedNav = document.querySelector('.nav-popout');
const shadowNav = document.querySelector('.shadow-nav');
menuToggle.addEventListener('click', (e)=>{
openedNav.style.display = openedNav.style.display == 'block' ? 'none' : 'block';
shadowNav.style.display = shadowNav.style.display == 'block' ? 'none' : 'block';
});
shadowNav.addEventListener('click', (e)=>{
if( openedNav.style.display == "block" ) {
shadowNav.style.display = openedNav.style.display = "none";
}
});
.pet-icon-container img{
width:150px;
}
.nav-popout,
.shadow-nav{
display:none;
}
<div class="pet-icon-container">
<img class="current-pet-icon" src="https://www.burgesspetcare.com/wp-content/uploads/2021/08/Hamster.jpg" alt="current pet icon" />
</div>
<div class='nav-popout'>#NAV-POPOUT#</div>
<div class='shadow-nav'>#SHADOW-NAV#</div>

A quick console.log(openedNav.style.display) will help you find the issue. In the first call to the click handler, openNav.style.disply is actually empty (not 'none').
Why does this happen
If you access a DOM Element via getElementById, you'll not be able to read the computed style of that element, because it is defined inside the CSS file (I assume you are doing that).
How to fix it
use getComputedStyle. Or see the top answers to these questions if you wanna know more:
document.getElementById(...).style.display is blank
myDiv.style.display returns blank when set in master stylesheet
menuToggle.addEventListener("click", () => {
if (getComputedStyle(openedNav).display=== "none") {
openedNav.style.display = "block";
shadowNav.style.display = "block";
} else {
openedNav.style.display = "none";
shadowNav.style.display = "none";
}
});

After click on same button show next image div at a time and hide current image div in javascript html

I am using Javascript, Html5, Jquery and Css. Right now I have three image div and I want to show one image div after click on button and I want to show next div after click on same button and hide current div.
right now i am using this code:
Css Code:
#Div2 {
display: none;
}
#Div3 {
display: none;
}
Html Code:
<div class="container">
<div class="row">
<input id="Button1" type="button" value="Click" onclick="switchVisible();"/>
<div class="col-sm-4">
<div id="Div1">
<canvas id="canvas1" class="img-responsive center-block" style="float:left"></canvas>
</div>
<div id="Div2">
<canvas id="canvas2" class="img-responsive center-block" style="float:left"></canvas>
</div>
<div id="Div3">
<canvas id="canvas3" class="img-responsive center-block" style="float:left"></canvas>
</div>
</div>
</div>
</div>
Java Script Code:
function switchVisible() {
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display === 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div2').style.display === 'none') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
document.getElementById('Div3').style.display = 'none';
}
else
{
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'block';
}
}
}
This code is working fine for two image div but it is not working for the third image.I've taken help from this link:https://stackoverflow.com/questions/
Now I have three image div but right now I am showing one image div at a time after click on button.
I want to show next image div after click on button and hide current image div.I told earlier I am using three image div. my motive to show image is as rotating.
Please give me some idea about this.

If you are using jQuery you could do this like this:
function switchVisible() {
$(".img-responsive").parent().each(function(){
if($(this).is(":visible")) {
$(".img-responsive").parent().hide();
if ($(this).next().length) {
$(this).next().show();
} else {
$($(".img-responsive")[0]).parent().show();
}
return false;
}
})
}
You can use prev() instead of next() for going back.
function switchVisibleRevert() {
$(".img-responsive").parent().each(function(index){
if($(this).is(":visible")) {
$(".img-responsive").parent().hide();
if ($(this).prev().length) {
$(this).prev().show();
} else {
$($(".img-responsive")[$(".img-responsive").length-1]).parent().show();//show last element
}
return false;
}
})
}

Take a look at the conditional statements.
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display === 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div2').style.display === 'none') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
document.getElementById('Div3').style.display = 'none';
}
else
{
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'block';
}
}
The first conditional statement is setting the display property for Div1 to block. On the next call the second condition sets Div2 to block and Div1 to none again...so on the next call condition 1 is evaluated as true again, because Div1 was set to 'none' in the second condition.
You might try removing the 'else' and adding another else if condition that checks to see if Div2 == 'block', you know that if Div2 is set to .block' that the next image to be shown is image 3:
if (document.getElementById('Div1')) {
if (document.getElementById('Div1').style.display === 'none') {
document.getElementById('Div1').style.display = 'block';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div1').style.display === 'block') {
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'block';
document.getElementById('Div3').style.display = 'none';
}
else if (document.getElementById('Div2').style.display === 'block')
{
document.getElementById('Div1').style.display = 'none';
document.getElementById('Div2').style.display = 'none';
document.getElementById('Div3').style.display = 'block';
}
}
It might be simpler to initialise a counter to keep track of which image is being shown since each Div has a unique ID and sequential value.

Hide div and don't show it again

I have this code that shows and hides two divs when "onmouseover".
function hide_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'none') e.style.display = 'block';
else e.style.display = 'none';
}
What I want is: when I do the mouseover it hides the div permanently and when I go over again it won't show anymore.
http://codepen.io/anon/pen/XmXjmx
THANKS!

You can just remove any code that sets e.style.display to block.
function hide_visibility(id) {
var e = document.getElementById(id);
e.style.display = 'none';
}
http://codepen.io/anon/pen/ojbzbK

You could just set the html code to blank like so:
$(document).ready(function() {
$( "#item" ).mouseover(function() {
$( "#item" ).html(""); //Set html contents of #item to empty
});
});
Of course you will not be able to unhide this content again as you have removed the html code. This will not matter though if there will not be a need for the element to be made visible again.

double click to show an div

I have used a javascript to show div by onclick but when i click outside div i want to hide the div.
after more searches, i have found an function, and it works perfectly
but there is an issue, the code requires double click for first time, to show the dive
my code:
<script>
// click on the div
function toggle( e, id ) {
var el = document.getElementById(id);
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if ( e.stopPropagation )
e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if ( toggle.el ) {
toggle.el.style.display = 'none';
}
}
</script>
<style>#tools{display:none;}</style>
<div id="tools">Hidden div</div>
show/hide
This is my full code, you can test it on your computer.
The question is: The function requires two clicks, i want show the div on click ( one click ) Not ( Double Click )

Try this - http://jsfiddle.net/JjChY/1/
Change
el.style.display = ( el.style.display == 'none' ) ? 'block' : 'none';
to
el.style.display = (el.style.display == 'none' || el.style.display == '') ? 'block' : 'none';

Use this:
el.style.display = window.getComputedStyle(document.getElementById("tools")).getPropertyValue("display") == "none" ? 'block' : 'none';
It should work.

The problem is that el.style.display only reads from the element's inline styles, not its CSS.
So, on the first click el.style.display is '' (blank string), so it's set to 'none'. Then the second time, el.style.display is 'none', so it works.
You need to try to read from the element's CSS if its inline styles are blank. I'm going to use the getStyle method from quirksmode for this:
function getStyle(x, styleProp) {
if (x.currentStyle) {
var y = x.currentStyle[styleProp];
}
else if (window.getComputedStyle) {
var y = document.defaultView.getComputedStyle(x, null).getPropertyValue(styleProp);
}
return y;
}
// click on the div
function toggle(e, id) {
var el = document.getElementById(id);
var display = el.style.display || getStyle(el, 'display');
el.style.display = (display == 'none') ? 'block' : 'none';
// save it for hiding
toggle.el = el;
// stop the event right here
if (e.stopPropagation) e.stopPropagation();
e.cancelBubble = true;
return false;
}
// click outside the div
document.onclick = function() {
if (toggle.el) {
toggle.el.style.display = 'none';
}
}​
DEMO: http://jsfiddle.net/JjChY/2/

Your code is a little convoluted. It can be written much simpler:
<script>
var toggle = function(id) {
var element = document.getElementById(id);
element.className = element.className === 'hidden' ? '' : 'hidden';
return false;
};
</script>
<style>
.hidden {
display: none;
}
</style>
<div id="tools" class="hidden">Hidden div</div>
show/hide

If you have jQuery, you could do something like this for the click outside.
First, set a class on the "tools" div when the mouse is inside it. Remove the class when the mouse is not inside it.
$('#tools').hover( function() {
$('#tools').addClass("inside");
},
function() {
$('#tools').removeClass("inside");
});
Then, track clicks on the HTML. Hide if the "inside" class is not on the "tools" div.
$("html").click( function() {
$("#tools").not(".inside").each( function() {
$("#tools").hide();
});
});

How to open a hidden div when a hash is on the URL?

I'm using this javascript code to have a couple "show/hide" toggled divs on my site:
<script language="javascript">
function toggledean() {
var ele = document.getElementById("toggleTextdean");
var text = document.getElementById("displayTextdean");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "Show more";
}
else {
ele.style.display = "block";
text.innerHTML = "Hide";
}
}
</script>
What should I add to this code to have the div be displayed upon loading the page with a specific #hash added to the URL?
Thank you very much.

This is not the javascript answer that you want, but you could try playing around with the :target pseudo selector. For instance,
<!-- HTML -->
<div id="foo">show this with #foo.</div>
<div id="bar">#bar shows this.</div>
<style type="text/css">
div {display: none}
:target {display: block}
</style>
Example: http://jsfiddle.net/ZAHns/4/ (thanks to Jared for the idea of adding the anchors).
Depending on what you are trying to do, this could possibly work, but think your requirements through.
Note: Take this response with a HUGE grain of salt -- don't use it.
To answer the actual question, use the following to determine if the hash is present:
var in_hash = location.hash.slice(1) === what_you_are_looking_for;
if (in_hash) ? /* IN HASH */ : /* NOT IN HASH */;

Something like this should work:
<script>
var hash = window.location.hash.replace('#', '');
if (hash) {
document.getElementById(hash).style.display = 'block'
}
</script>
If you've only got the one element, like your script has, you could just call the function to toggle it if any hash exists in the url:
<script type="text/javascript">
function toggledean() {
...
}
if (window.location.hash == '#dean') toggledean();
</script>
Or you could make your toggle script a little more universal:
<script type="text/javascript">
var hash = window.location.hash.replace('#', '');
function toggle (elementPartial) {
var ele = document.getElementById('toggleText'+elementPartial);
var text = document.getElementById('displayText'+elementPartial);
if(ele.style.display == 'block') {
ele.style.display = 'none';
text.innerHTML = 'Show more';
} else {
ele.style.display = 'block';
text.innerHTML = 'Hide';
}
}
if (hash) {
toggle(hash);
}
</script>
Additionally, you could make this a little simpler and more flexible using a javascript framework, like jQuery.

Others have answered the URL hash part, I'll just comment on the script:
> <script language="javascript">
The language attribute is deprecated, type is required, so:
<script type="text/javascript">
> function toggledean() {
> var ele = document.getElementById("toggleTextdean");
> var text = document.getElementById("displayTextdean");
>
> if(ele.style.display == "block") {
The default display property is '' (empty string) unless you have set it to "block" previously.
> ele.style.display = "none";
> text.innerHTML = "Show more";
> } else {
> ele.style.display = 'block';
> text.innerHTML = 'Hide';
> }
Given the very high probability that the div will have a display value of '' when first loaded, you are much better off testing for style.display = 'none', so:
if (ele.style.display == 'none') {
ele.style.display = '';
text.innerHTML = 'Hide';
} else {
ele.style.display = 'none';
text.innerHTML = 'Show more';
}