Javascript 代码只有在第二次单击 html 按钮时才会触发？

Question

我正在学习 javascript，这段简单的代码无法按照我需要的方式工作。

我所需要的只是通过单击按钮来显示主标签。但是，直到第二次单击它才显示。

所以第一次点击不会显示main。第二次点击即可。

我尝试在 html 文档中移动编码（在正文结束标记之前/之后等）。

我已经查看了堆栈溢出，类似的问题并不能真正帮助我的情况。或者至少我不明白他们如何帮助我作为初学者。

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>

我一定缺少一些东西，阻止第一次点击触发代码。我的意思是，看起来很简单？？？

Answer 1

if (mainSection.style.display === "none")

正在寻找内联样式标签，因此无需在 CSS 中设置

display:none;

，只需将其设置为内联元素即可：

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>

Answer 2

正如已回答的那样，

mainSection.style.display

是空的。另一种选择是获取元素的计算样式：

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>

Answer 3

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>

最初

mainSection.style.display

为空，因此它落在

else

语句的

if

部分，并将属性更改为

none

。 第二次单击时，该属性现在的值为

none

，这就是它在第二次单击时起作用的原因。

HTMLElement.style 属性用于获取和设置元素的内联样式。

Answer 4

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>