Why My Show Hide Button Needs Double-Click on First Time

Why my show hide button needs double-click on first time

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>

Show/Hide Requires a Double-click

The reason you need to click twice:

element.style.display refers to inline styles only.

Initially, your elements do not have a style-attribute. As a result, element.style.display returns the empty String:

function showHide(c,t) {  var c = document.getElementById("content");  var t = document.getElementById("text");  console.log("c.style.display is:" + c.style.display);  if (c.style.display === "none") {    c.style.display = "block";    t.innerHTML = 'See Less Benefits';  } else {    t.innerHTML = 'See More Benefits';    c.style.display = "none";  }}

<div class="content" id="content"><br><p><span class="benefit-stat">$2B</span> lorem</p><p><span class="benefit-stat">$2B</span> ipsum</p><p><span class="benefit-stat">$100</span> ipsum</p><p><span class="benefit-stat">32%</span> ipsum</p></div><p class="benefits-drop" id="text" onclick="showHide()">See More Benefits</p>

Troubleshooting button need double click to work when first launched

I swapped the if statement around to fix the issue

function myFunction(e) {             var x = document.getElementById("myDIV");   if (x.style.display === "block") {           x.style.display = "none";   } else {           x.style.display = "block";   }}
function myFunction2() {    var x = document.getElementById("myDIV2");    if (x.style.display === "block") {     x.style.display = "none";    } else {     x.style.display = "block";    }}

#myDIV {    width: 200px;    background-color:#333;    color:#fff;    padding:0;    margin:0;    display: none;}#myDIV2 {    width: 200px;    background-color:#333;    color:#fff;    display: none;}#arrow{    height:10px;    width:10px;}#ok{    height:20px;    width:20px;}#button{ background-color:#333; color:#fff; width:250px; empty-cells:hide;}table,tr,td{ border:2px solid black; border-collapse:collapse;}

<table id="button"><tr><td><button onclick="myFunction()"><img src="img/arrow.png" id="arrow"></button>Première liste:</td></tr><tr>   <td>      <div id="myDIV">      <ul>      <li>1er item</li>      <li>2eme item</li>      <li>3eme item</li>      </ul>      </div>   </td></tr><tr><td><button onclick="myFunction2()"><img src="img/arrow.png" id="arrow"></button>Deuxième liste:</td></tr><tr><td>   <div id="myDIV2">   <ul>      <li>1er item</li>      <li>2eme item</li>      <li>3eme item</li>   </ul>   </div></td></tr></table>

(Javascript) Why have to click multiple times for buttons to work?

document.querySelectorAll('.span').forEach((ele) => {
  ele.addEventListener('click', (e) => {
    ele.classList.toggle('red');
  })
})

.span {
  font-size: 16px;
  cursor: pointer;
  background: yellow;
  color: #fff;
}

.red {
  background-color: red;
}

<span class="span">Red or Yellow</span>
<span class="span">Red or Yellow</span>

---

Related Topics