Код Javascript не срабатывает до второго нажатия кнопки html? ⇐ CSS

[Anonymous]

Я изучаю JavaScript, и этот простой фрагмент кода просто не работает так, как мне нужно.

Все, что мне нужно, — это отображать основной тег одним нажатием кнопки. ОДНАКО, он не хочет отображаться до ВТОРОГО щелчка.

Поэтому первый щелчок не отображает основное. Второй щелчок дает результат.

Я пробовал перемещать код по 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;}

Код: Выделить всё

 ... 
About

Должно быть что-то, что мне не хватает, что мешает этот первый щелчок после запуска кода. Я имею в виду, это кажется достаточно простым???

Подробнее здесь: https://stackoverflow.com/questions/570 ... tml-button