Скрытие/отображение содержимого в javascript

Question

Я - очень новый веб-разработчик. Я прекрасно разбираюсь в HTML и CSS, а я пытаюсь изучить javascript. Im very new 1 месяц назад Я никогда не кодировал одну строку, и я уже сделал 2 или 3 веб-сайта, но ни один из них не поддерживает JS.

Я знаю, что могу сделать это в jquery и уже, но хочу Поймите это, и я хочу, чтобы иметь возможность сделать это в javascript.

Так вот оно. Я делаю простую игру для практики, все, что она делает, это задавать вопросы и изменять элементы из display = none, чтобы отобразить = блок на основе события click для двух больших кнопок YES или NO.

Итак, этот первый код, ориентированный на yes_button, отлично работает. Появятся инструкции Скрыть и первый вопрос (Q1). Кнопка «Нет» не работает, и я не могу понять, почему, это по сути тот же код, предназначенный для другого элемента.

Вещь, которые я проверил: элемент ID/селекторы являются правильными верблюжьим хорошо, нет незакрытых скобок, пола колонов не хороши,

является ошибка в логике где-нибудь?

window.onload = function() { 

yes_button.onclick= function() { 
document.getElementById("instructions").style.display="none"; 
document.getElementById("q1").style.display="block"; 

}; 


no_button.onClick=function() { 
document.getElementById("instructions").style.display="none"; 
document.getElementById("nointro").style.display="block"; 

}; 



}; 

Answer 1

Вы можете удалить вызов функции window.onload. Вы можете разместить свой импорт JavaScript непосредственно перед закрывающим тегом, чтобы dom был готов, прежде чем пытаться щелкнуть по кнопке.

Ваш JavaScript События должны выглядеть следующим образом:

document.getElementById("yes_button").onclick = function(){ 

      document.getElementById("instructions").style.display= "none"; 
      document.getElementById("q1").style.display = "block"; 

}; 


document.getElementById("no_button").onclick = function(){ 

      document.getElementById("instructions").style.display="none"; 
      document.getElementById("nointro").style.display="block"; 


};