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

how to apply same function to multiple divs

on this page (http://jodiaries.com/test/) I need to make a popup appear when I click on the red boxes.
So far it works, I added the onclick = "div1" attribute to the red box (on the others = "div2", etc) and use this:
function showhide(divElement) {
var e = document.getElementById(divElement);
if(e.style.display == 'flex'){
e.style.display = 'none';
} else {
e.style.display = 'flex';
}
}
for now the popup closes when I click again on the number, I would like to make it close by clicking anywhere outside that div/popup. I created another script (probably wrong) with this:
window.onload = function(){
var divToHide = document.getElementById('div1');
document.onclick = function(e){
if(e.target.id !== 'div_block-286-119'){
divToHide.style.display = 'none';
}
};
};
but it works only on the first red box, not on the others (because I target only div_block-286-119).
How can I get it to work with all popups (i will add more as soon as everything works)?
thanks in advance!

It's a bad idea to work with ids in your case, also in general. Instead of onclick="yourFunction()" use event listener. I didn't test the code down below, but it should work.
document.querySelectorAll(".crono-day-red").forEach(red => {
red.addEventListener("click", () => showhide(red));
})
const showhide = red => {
// I prefer to control styles by toggling classes.
// IMO, it's easier, especially for multiple styles.
red.closest(".ct-div-block").classList.toggle("popup-visible");
}
const closePopups = () => {
window.addEventListener("click", () => {
let clickedInside = event.target.classList.contains(".popup-visible")
|| event.target.closest(".popup-visible)"
if (clickedInside) {
return;
}
document.querySelectorAll(".popup-visible").forEach(x => x.classList.remove("popup-visible"));
})
}
window.onload = closePopups();
.ct-div-block .nove-gen-click { display: none }
.ct-div-block.popup-visible .nove-gen-click { display: flex }
All you need to do is to toggle "popup-visible" class by your functions.
I also noticed that you define popup styles in #div1 and #div2... Very bad practice.
EDIT AFTER COMMENT
To close currently open red box when you click the new one:
const showhide = red => {
red.closest(".ct-section-inner-wrap")
.querySelectorAll(".popup-visible")
.forEach(x => x.classList.remove("popup-visible"));
red.closest(".ct-div-block").classList.add("popup-visible");
}

Javascript change display CSS

Im completely new to Javascript, this is what i want:
Guy clicks on an element, so i trigger an onclick and i want to run a JS function, all clear so i need a JS function, what this function needs to do:
Check if the display of element #mobilemenu is block or none.
When it is block change it to none, when its none change it to block.
What i found so far was this:
function Change(){
document.getElementById("mobilemenu").style.display = "block"; }
But i am stuck on checking if it is currently block or none. I am kinda new to JS so maybe it is super easy (as i think) but i can't find a proper tutorial or some examples.
Thanks in advance!

You can use an if/else statement to check whether the element is displayed, and then show or hide it accordingly:
function Change() {
/* Put the mobilemenu into a variable */
var mobilemenu = document.getElementById("mobilemenu");
/* Check the display property of the element's style object */
if (mobilemenu.style.display !== "block") {
/* The element isn't display: block; so show it */
mobilemenu.style.display = "block";
} else {
/* The element is display: block; so hide it */
mobilemenu.style.display = "none";
}
}

Just add an if-else.
function Change(){
var displayVal = document.getElementById("mobilemenu").style.display;
if (displayVal == "block")
document.getElementById("mobilemenu").style.display = "none";
else if (displayVal == "none")
document.getElementById("mobilemenu").style.display = "block";
}
Here is a Fiddle: http://jsfiddle.net/vaa9goLe/

Also, you can use getComputedStyle in case your element doesn't have initial display value to ensure your function will always work.
var element = document.getElementById('btn');
element.onclick = function() {
var mydiv = document.getElementById('mydiv'),
isVisible = (mydiv.currentStyle || window.getComputedStyle(mydiv, '')).display == 'block';
if (isVisible){
mydiv.style.display = 'none';
} else {
mydiv.style.display = 'block';
}
};
jsfiddle:
http://jsfiddle.net/ykypcmt2/

This may help you
<div id="mobilemenu" style="display:block"></div>
<script type="text/javascript">
function Change(){
var contentId = document.getElementById("mobilemenu");
contentId.style.display == "block" ? contentId.style.display = "none" :
contentId.style.display = "block";
}
</script>

If the div had style value anything other than block or none , the following code should do nothing and preserve the original style value.
function Change(){
document.getElementById("mobilemenu").style.display = ( document.getElementById("mobilemenu").style.display === "block" ) ? "none" : ( document.getElementById("mobilemenu").style.display === "none" ) ? "block" : document.getElementById("mobilemenu").style.display ;
}

Javascript if else function working only after first click

I've checked other questions about the same effect but the ones I found haven't helped.
The javascript code works perfectly but not on first click. (When clicked the first time nothing happens but every next time all is well.) It is placed at the end of HTML's <head> as
<script>
$(function () {
$("#askLink").click(function () {
if (document.getElementById('askArticle').style.display === "none") {
document.getElementById('askArticle').style.display = "block";
document.getElementById('CONTENT').style.display = "none";
}
else {
document.getElementById('askArticle').style.display = "none";
document.getElementById('CONTENT').style.display = "block";
}
});
});
</script>
And the askLink is set up as
<li>
Ask
</li>
Another hyperlink is set up pretty much the same way with a different function and isn't affected by such an issue.
What am I missing?

Remove the javascript from a href:
Ask
Should be this:
Ask
Or, you may use '':
Ask
Also, try to use preventDefault():
$("#askLink").click(function (e) {
e.preventdefault();

since you are using jQuery, you could simply do:
$(function () {
$("#askLink").click(function () {
var askArticle = $('#askArticle');
//check if #askArticle is visible
var isShown = askArticle.is(":visible");
askArticle.toggle(!isShown); //set to show or hide as per isShown
$('#CONTENT').toggle(isShown);
});
});
and btw, your link Ask will work without any change to it

Replace the 'javascript:;' from the anchor to '#'
Ask
And to prevent the page to be refreshed or go at the top use preventDefault() as such:
$("#askLink").click(function(e) {
e.preventDefault();
if(document.getElementById('askArticle').style.display === "none"){
document.getElementById('askArticle').style.display = "block";
document.getElementById('CONTENT').style.display = "none";
}
else{
document.getElementById('askArticle').style.display = "none";
document.getElementById('CONTENT').style.display = "block"; //Its block not "CD"
}
});

You should use on not click:
<script>
$(function () {
$("#askLink").on("click" , function (e) {
e.preventDefault();
if (document.getElementById('askArticle').style.display === "none") {
document.getElementById('askArticle').style.display = "block";
document.getElementById('CONTENT').style.display = "none";
}
else {
document.getElementById('askArticle').style.display = "none";
document.getElementById('CONTENT').style.display = "block";
}
});
});
</script>

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