We Keep Coding

Why functionality within a JavaScript functions is executing after two clicks? [duplicate]

I have this show/hide button on my website. It works, but on the first time the user needs to double-click it as if the switch is set to "hide" but the element is already hidden...
I'd like to edit my code so the button shows the element with a single click on the first time
I'm new to javascript, so I don't know how to change this.
Thank you
function showhidemenu() {
var x = document.getElementById("menu");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#menu {
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
}
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

To achieve expected result, use below option of checking display initially which will be empty if it is not inline
x.style.display === "none" || x.style.display === ""
Please refer this link for more details - Why element.style always return empty while providing styles in CSS?
function showhidemenu() {
var x = document.getElementById("menu");
if (x.style.display === "none" || x.style.display === "") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
#menu {
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
}
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

Because initially x.style.display === "none" is false and it goes to else block.
You can use ternary operator for this purpose.
function showhidemenu() {
var x = document.getElementById("menu");
x.style.display = !x.style.display ? 'block' : '';
}
#menu {
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
}
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>
The code works because '' is falsy value

You need to check your "if/then" statement. You are checking the wrong order.
function showhidemenu() {
var x = document.getElementById("menu");
if (x.style.display == "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
#menu {
background: rgba(0, 0, 0, 0);
position: absolute;
z-index: 1;
top: 60px;
right: 50px;
width: 150px;
font-family: 'Open Sans', sans-serif;
display: none;
}
<div id="menu">This is a menu</div>
<button onclick="showhidemenu()">Show/hide</button>

How to show or hide a div when clicking on the same button?

I face a problem when i want to add interactivity on my leaflet map.
I have a button on my map
<button id="az">Availability Zones</button>
The thing i want is when i click on it, it show a square of informations on my map
So i have create a square
<div class="square" id='square'> </div>
CSS = .square{
z-index: 4000;
width: 100%;
height: 0;
padding-top: 100%;
background-color: #ccc;
position: absolute;
display: none;
}
And an other css class square with same properties but with a display: block
.squareclick{
z-index: 4000;
width: 30%;
weight: 30%;
padding: 0 25 30;
margin-left: 400px;
margin-bottom: 200px;
height: 0;
padding-top: 100%;
background-color: #ccc;
position: relative;
display: block;
}
Now, for opening this square on a button i've add some interactivity
var button = document.getElementById('az')
L.DomEvent.on(button,'click',function(e){
console.log('Button clicked')
});
L.DomEvent.on(button,'click',function(){
document.getElementById('square').setAttribute("class", "squareclick");
});
The thing is that that button works for opening the square, but not for closing (I know this is normal)
I've try that thing but it seems to not work
L.DomEvent.on(button,'click',function myFunction() {
var x = document.getElementById("square");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
I don't know how to add a second interactivity on the same button :(
If someone can help!
Thank you very much

What you can try doing is instead of directly checking whether the square is visible or not, you can set a variable to check. Change:
L.DomEvent.on(button,'click',function myFunction() {
var x = document.getElementById("square");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
To:
var shown = false;
L.DomEvent.on(button,'click',function myFunction() {
var x = document.getElementById("square");
if (shown == false) {
x.style.display = "block";
shown = true;
} else if (shown == true) {
x.style.display = "none";
shown = false;
}
}
The variable shown tells us at the start the square is not visible. Every time you click the button, the variable changes and so does the style. If the square was to be visible at the start, then you can simply change shown to true at the start of the script. See if that way works. :)

I recommand to only add a class to the square that changes the display: none style.
var button = document.getElementById('az')
var square = document.getElementById('square')
L.DomEvent.on(button,'click',function(e){
console.log('Button clicked')
if(L.DomUtil.hasClass(square,'show')){
L.DomUtil.removeClass(square,'show');
}else{
L.DomUtil.addClass(square,'show');
}
});
.square{
z-index: 4000;
width: 30%;
weight: 30%;
padding: 0 25 30;
margin-left: 400px;
margin-bottom: 200px;
height: 0;
padding-top: 100%;
background-color: #ccc;
position: absolute;
display: none;
}
.show{
display: block;
}
https://jsfiddle.net/falkedesign/v8tdzmhe/

Make a clickable element close a visible element before opening a new element

See my code snippet below. I have multiple clickable divs that when clicked, shows some content below. Each clickable div displays a different set of content. My problem is, both content blocks can be open at the same time. I only want to show one content block at a time. So when clicked, if there is already a content block open I want it to close before opening the new content block. How can I achieve this?
function showOne() {
var x = document.getElementById("thing");
if (x.style.display === "none") {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
function showTwo() {
var x = document.getElementById("another-thing");
if (x.style.display === "none") {
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
body{
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
}
div{
background-color: teal;
width: 100%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.clickone{
cursor: pointer;
}
.clicktwo{
background-color: CadetBlue;
cursor: pointer;
}
.thing,
.another-thing{
background-color: salmon;
height: 200px;
margin: 25px;
width: auto;
display: none;
}
<body>
<div class="clickone" onclick="showOne()">
<p>Click Me To Show One Thing</p>
</div>
<div class="clicktwo" onclick="showTwo()">
<p>Click Me To Show Another Thing</p>
</div>
<div id="thing" class="thing">
<p>Thing</p>
</div>
<div id="another-thing" class="another-thing">
<p>Another Thing</p>
</div>
</body>

The easiest way would be making a switch like this:
function showOne() {
var x = document.getElementById("thing");
var another = document.getElementById("another-thing");
if (x.style.display === "none") {
another.style.display = "none"
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
function showTwo() {
var x = document.getElementById("another-thing");
var thing = document.getElementById("thing");
if (x.style.display === "none") {
thing.style.display = "none";
x.style.display = "flex";
} else {
x.style.display = "none";
}
}
body{
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
}
div{
background-color: teal;
width: 100%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.clickone{
cursor: pointer;
}
.clicktwo{
background-color: CadetBlue;
cursor: pointer;
}
.thing,
.another-thing{
background-color: salmon;
height: 200px;
margin: 25px;
width: auto;
display: none;
}
<body>
<div class="clickone" onclick="showOne()">
<p>Click Me To Show One Thing</p>
</div>
<div class="clicktwo" onclick="showTwo()">
<p>Click Me To Show Another Thing</p>
</div>
<div id="thing" class="thing">
<p>Thing</p>
</div>
<div id="another-thing" class="another-thing">
<p>Another Thing</p>
</div>
</body>
But you can make it more reusable doing a reusable function
Its better if you have more and more div's to switch
function show(receivedId) {
const allIds = ["thing", "another-thing"];
for (const index in allIds) {
const actualId = allIds[index];
if (actualId === receivedId) {
document.getElementById(actualId).style.display = "flex";
} else {
document.getElementById(actualId).style.display = "none";
}
}
}
body{
display: flex;
flex-direction: column;
padding: 0px;
margin: 0px;
}
div{
background-color: teal;
width: 100%;
color: #ffffff;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.clickone{
cursor: pointer;
}
.clicktwo{
background-color: CadetBlue;
cursor: pointer;
}
.thing,
.another-thing{
background-color: salmon;
height: 200px;
margin: 25px;
width: auto;
display: none;
}
<body>
<div class="clickone" onclick="show('thing')">
<p>Click Me To Show One Thing</p>
</div>
<div class="clicktwo" onclick="show('another-thing')">
<p>Click Me To Show Another Thing</p>
</div>
<div id="thing" class="thing">
<p>Thing</p>
</div>
<div id="another-thing" class="another-thing">
<p>Another Thing</p>
</div>
</body>

function showOne() {
var x = document.getElementById("thing");
var y = document.getElementById("another-thing");
if (x.style.display === "none") {
x.style.display = "flex";
y.style.display = "none";
} else {
x.style.display = "none";
}
}
function showTwo() {
var x = document.getElementById("another-thing");
var y = document.getElementById("thing");
if (x.style.display === "none") {
x.style.display = "flex";
y.style.display = "none";
} else {
x.style.display = "none";
}
}
If there are only two divs in question you could do it like this. If there are many then perhaps give them class names as well as IDs and then cycle through the class names before setting the 1 ID you wish to show.

Why I have to click 2 times to run this function?

This is the code i'm working on, and i don't know why everytime that i refresh the page i need to click 2 times to open the menu. Once i click the second time all works correctly.
This is the html of the button:
var x = document.getElementById("overlay-menu");
x.style.height = "0%";
function showMenu() {
var x = document.getElementById("overlay-menu");
if (x.style.height === "0%") {
x.style.height = "100%";
} else {
x.style.height = "0%";
}
}
.overlay-menu {
width: 100%;
height: 0%;
padding: 0;
margin: 0;
background-color: #ffffff;
z-index: 10000;
position: fixed;
color: #0A0A0A;
overflow: hidden;
display: block;
transition: .5s cubic-bezier(.55, .03, .26, 1.01);
}
.nav-menu-text {
width: fit-content;
height: fit-content;
margin: 0;
padding: 0;
color: #EB761D;
font-size: 15px;
position: relative;
top: 2.8em;
cursor: pointer;
}
<p class="nav-menu-text" onclick="showMenu()">MENU</p>
<div class="overlay-menu" id="overlay-menu">
<!-- code of the menu -->
</div>

x.style.height is probably not "0%" when your code runs, try changing the condition from:
if (x.style.height === "0%") {
to
if (x.style.height !== "100%") {

getElementById().style.display does not work

I made some js code for <div> to appear or disappear.
[src.js]
openSearch = () => {
var con = document.getElementById("search-bar");
if(con.style.display == 'none') {
con.style.display = 'block';
} else {
con.style.display = 'none';
}
}
[style.css]
#search-bar {
position: absolute;
height: 4em;
width: 20em;
background-color: white;
border: 1px solid black;
padding: 1.5rem;
right: 0;
display: none;
}
and add onclick="openSearch()" to <a> tag.
When I click the <a> tag first time, it doesn't work anything.
But click again, it works properly.
So I tried to console.log(document.getElementById("search-bar").style.display, it throws ""(blank).
I wonder that I defined display: none to search-bar but why initial style.display of search-bar is blank value?
And how can I fix it?

Alternatively, you can move the display style to another class and can toggle class.
openSearch = () => {
var con = document.getElementById("search-bar");
con.classList.toggle("hidden");
}
#search-bar {
position: absolute;
height: 4em;
width: 20em;
background-color: white;
border: 1px solid black;
padding: 1.5rem;
right: 0;
}
.hidden {
display: none;
}
<a onclick="openSearch()">Toggle</a>
<div id="search-bar" class="hidden">Some text here</div>

function openSearch()
{
var div = document.getElementById("search-bar");
if (div.style.display !== "none") {
div.style.display = "none";
}
else {
div.style.display = "block";
}
}

You could try initializing the style via js to none:
document.getElementById("search-bar").style.display = 'none';
When the page loads. My guess is that'll work.

[SOLVED]
First I add display: none to css file.
But after style="display: none" to a tag, it works properly.
Maybe I think there is loading priority, But I don't know why exactly.

when you set the display:none in css it innisial like display="". and not display=none. the result is the same, but if you check display='none' he will return false.. you can try it like this:
openSearch = () => {
var con = document.getElementById("search-bar");
if(con.style.display == '') {
con.style.display = 'block';
} else {
con.style.display = '';
}
}
and it will work fine

Use this line code:
if(con.style.display == 'none' || con.style.display == '') {
openSearch = () => {
var con = document.getElementById("search-bar");
if(con.style.display == 'none' || con.style.display == '') {
con.style.display = 'block';
} else {
con.style.display = 'none';
}
}
#search-bar {
position: absolute;
height: 4em;
width: 20em;
background-color: white;
border: 1px solid black;
padding: 1.5rem;
right: 0;
display: none;
}
<div id="search-bar">My Div</div>
<a onclick="openSearch()" href="#">Click</a>