CODEWITHSUNDEEP
javascripthtmlcssdomevent-listener
Catherine Hill Hyman
Catherine Hill Hyman

Reputation: 45

Javascript code doesn't fire until the 2nd click for an html button?

I'm learning javascript, and this simple piece of code just won't work the way I need it to.

All I need is to display the main tag at the click of a button. HOWEVER, it doesn't want to display until the SECOND click.

So the first click doesn't display the main. The second click does.

I've tried moving my coding around the html document (before/after body closing tag, etc).

I've looked through stack overflow, and similar questions don't really help my case. Or at least I don't understand how they can help me as a beginner.

var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);

function displayMain(){
  var mainSection = document.getElementsByTagName("main")[0];
  if (mainSection.style.display === "none"){
    mainSection.style.display = "grid";
  }
  else{
    mainSection.style.display = "none";
  }
}
main{display:none;}
<main> ... </main>
<button type="button" id="aboutLink">About</button>

There has to be something I'm missing that prevents that 1st click from firing the code. I mean, it seems simple enough???

Upvotes: 3

Views: 755

Answers (4)

user25934586
user25934586

Reputation: 1

Just switch the order of the testing function: instead of starting with the 'none', start with the 'grid':

var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);

function displayMain(){
  var mainSection = document.getElementsByTagName("main")[0];
  if (mainSection.style.display === "grid"){
    mainSection.style.display = "none";
  }
  else{
    mainSection.style.display = "grid";
  }
}

main{display:none;}

<main> ... </main>
<button type="button" id="aboutLink">About</button>

Upvotes: 0

The fourth bird
The fourth bird

Reputation: 163287

As has been answered, mainSection.style.display is empty. Another option is to get the computed style of the element:

var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);

function displayMain() {

  var mainSection = document.getElementsByTagName("main")[0];
  if (window.getComputedStyle(mainSection).getPropertyValue('display') === "none") {
    mainSection.style.display = "grid";
  } else {
    mainSection.style.display = "none";
  }
}
main {
  display: none;
}
<main> ... </main>
<button type="button" id="aboutLink">About</button>

Upvotes: 2

APAD1
APAD1

Reputation: 13666

if (mainSection.style.display === "none") is looking for an inline style tag, so instead of setting display:none; in your CSS, just set it inline on the element:

var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);

function displayMain(){
  var mainSection = document.getElementsByTagName("main")[0];
  if (mainSection.style.display === "none"){
    mainSection.style.display = "grid";
  }
  else{
    mainSection.style.display = "none";
  }
}
<main style="display:none;"> ... </main>
<button type="button" id="aboutLink">About</button>

Upvotes: 3

silentw
silentw

Reputation: 4885

var aboutShow = document.getElementById("aboutLink");
aboutShow.addEventListener("click", displayMain);

function displayMain(){
  var mainSection = document.getElementsByTagName("main")[0];
  if (mainSection.style.display || "none" === "none"){
    mainSection.style.display = "grid";
  }
  else{
    mainSection.style.display = "none";
  }
}
main{display:none;}
<main>text</main>
<button type="button" id="aboutLink">About</button>

Initially mainSection.style.display is empty, so it falls on the else part of the if statement and changes the property to none. On the second click, the property now has the value of none, that's why it works on the second click.

The HTMLElement.style property is used to get as well as set the inline style of an element.

Upvotes: 0

Related Questions