my questions stop after the second....

[kairajohnson]

Hi there!

My goal is to display one question after another in a div with various behaviours (background will change per question). The problem I am having is that when I get to the second question, nothing is happening when I click.

here is my code:

var yes=document.getElementById('yes');
var no=document.getElementById('no');
 point = 0;

              function yes1(){
              document.querySelector('.Question1').style.display='none'
              document.querySelector('.Question2').style.display='block'
            };

              function no1(){
              document.querySelector('.Question1').style.display='none'
              document.querySelector('.Question2').style.display='block'
            };

              if (yes.onclick= (yes1)){

                 point++;
                 console.log(point)
                 no.onclick=(no1)
               };

               //question2 to 3
               //Question2 Transition

               var yes2=document.getElementById('yes');
               var no2=document.getElementById('no');
               point = 0;

                             function yes2(){
                             document.querySelector('.Question1').style.display='none'
                             document.querySelector('.Question2').style.display='none'
                             document.querySelector('.Question3').style.display='block'
                           };

                             function no2(){
                               document.querySelector('.Question1').style.display='none'
                               document.querySelector('.Question2').style.display='none'
                               document.querySelector('.Question3').style.display='block'

                               if (no2.onclick=(no2)){

                                  point++;
                                  yes2.onclick=(yes2)
                                };

                           };

[RobertAKARobin]

Make sure to properly indent your code before it goes all the way off the page!

var yes=document.getElementById('yes');
var no=document.getElementById('no');
point = 0;

function yes1(){
  document.querySelector('.Question1').style.display='none'
  document.querySelector('.Question2').style.display='block'
};

function no1(){
  document.querySelector('.Question1').style.display='none'
  document.querySelector('.Question2').style.display='block'
};

if (yes.onclick= (yes1)){

  point++;
  console.log(point)
  no.onclick=(no1)
};

//question2 to 3
//Question2 Transition

var yes2=document.getElementById('yes');
var no2=document.getElementById('no');
point = 0;

function yes2(){
  document.querySelector('.Question1').style.display='none'
  document.querySelector('.Question2').style.display='none'
  document.querySelector('.Question3').style.display='block'
};

function no2(){
  document.querySelector('.Question1').style.display='none'
  document.querySelector('.Question2').style.display='none'
  document.querySelector('.Question3').style.display='block'

  if (no2.onclick=(no2)){

    point++;
    yes2.onclick=(yes2)
  };

};

This line:

if (yes.onclick= (yes1)){

...sets the event listener only on yes, which is defined here:

var yes=document.getElementById('yes');

So you're telling the browser to listen for clicks only on one element.

[kairajohnson]

//ask user for name

var name= prompt('Please enter your Nickname', ''); if ( (name=='') || (name==null) ) { name=""; }

//welcome Header

var welcome_header = document.createElement("H1"); console.log(welcome_header); var header_text = document.createTextNode ("Welcome " + name.toUpperCase() +"\n" + ", lets see if your green!"); console.log(header_text); welcome_header.appendChild(header_text);

document.getElementById("welcome_text").appendChild(welcome_header);

//Transition from homepage to first question

var gameStart=document.getElementById('letsplay')

function changeBackgroundImageQuestion1 (){ document.getElementById("welcome_page").style.backgroundImage = "url('cycling.jpg')"; }

gameStart.addEventListener('click', changeBackgroundImageQuestion1);

var welcomebutton = document.getElementById('letsplay') welcomebutton.addEventListener('click',hideshow,false);

function hideshow() { document.getElementById('letsplay').style.display = 'block'; this.style.display = 'none' document.getElementById('welcome_text').style.display = 'block'; welcome_text.style.display ='none' document.getElementById("trivia_box").style.display = 'block' } //Questions Loop

var Questions=document.getElementsByClassName("Question") var points = 0; $(document).ready(function(){ for (var i=0; i<Questions.length; i++){ var input = prompt(Questions[i].textContent) { $('body').append(<'div class="Questions' + i + '"/>'); } }); if(input === "yes"){ points = points + 1; } } alert("You got " + points + " points!");

[kairajohnson]

@joe-gz

[kairajohnson]

I don't mind researching it myself. When I type "add loop to div javascript," I'm finding stackflow solutions to specific questions but havent found anything that breaks it down. Just wondering the proper term to google that I may find better results

[joe-gz]

Could you let me know what the specific block of that code above is giving you issues? it's kind of hard to read right now. just make sure to use three backticks when pasting in code too so it looks like code. thanks!

[kairajohnson]

I want to put the last loop into my div #trivia_box

//ask guest for name
var name= prompt('Please enter your Nickname', '');
if ( (name=='') || (name==null) )
{
  name="";
}

//welcome Header
var welcome_header = document.createElement("H1");
console.log(welcome_header);
var header_text = document.createTextNode ("Welcome " + name.toUpperCase() +"\n" + ", lets see if your green!");
console.log(header_text);
welcome_header.appendChild(header_text);

document.getElementById("welcome_text").appendChild(welcome_header);

//Transition from homepage to first question

var gameStart=document.getElementById('letsplay')

function changeBackgroundImageQuestion1 (){
  document.getElementById("welcome_page").style.backgroundImage = "url('cycling.jpg')";
}

gameStart.addEventListener('click', changeBackgroundImageQuestion1);

var welcomebutton = document.getElementById('letsplay')
welcomebutton.addEventListener('click',hideshow,false);

function hideshow() {
  document.getElementById('letsplay').style.display = 'block';
  this.style.display = 'none'
  document.getElementById('welcome_text').style.display = 'block';
  welcome_text.style.display ='none'
  document.getElementById("trivia_box").style.display = 'block'
}
//Questions Loop

var Questions=document.getElementsByClassName("Question")
var points = 0;
$(document).ready(function(){
  for (var i=0; i<Questions.length; i++){
  var input = prompt(Questions[i].textContent) {
    $('body').append(<'div class="Questions' + i + '"/>');
  }
});
  if(input === "yes"){
    points = points + 1;
  }
}
alert("You got " + points + " points!");

[joe-gz]

can you push your changes up to your github repo so i can take a look at all the code? just send me the link to the repo here and I'll look through it

[joe-gz]

The genius bar is also open in CR6 if you want to talk to someone live right now!

[kairajohnson]

Thanks https://github.com/kairajohnson/project1.git

[RobertAKARobin]

Extra curly brace!

[joe-gz]

ah yup, what robin says. looks like there's an extra curly brace. make sure you're using the inspector and console to look at errors that might pop up!

[kairajohnson]

Hi guys, I am receiving a "not defined" error for my divs.forEach method tho divs is defined. The method I am within the code is:

divs=document.querySelectorAll(".Question");

divs.forEach(function(div){ Question.style.display = "none"; console.log(divs) })

Is there something I'm missing?

//Javascript with variables

var Questions=document.getElementsByClassName("Question")
var points = 0;
var input=document.querySelectorAll(".button")

for (var i=0; i <= Questions.length; i++){
  var questiontext = Questions.textContent;
  document.getElementById("trivia_box").innerHTML+='<div class="Questions' + i + '">' + questiontext + "</div>";

  if(input === "yes"){
    points = points + 1;
  }
}
alert("You got " + points + " points!");

divs=document.querySelectorAll(".Question");
divs.forEach(function(div){
  Question.style.display = "none";
  console.log(divs)
})

//My HTML with questions (which is what the divs variable targets)

<div class="Question">Do you ride a bike 5 or more times a week?</div>
      <div class="Question">If your in the car and have an empty bottle, Would you  throw it out the window?</div>

[jshawl]

.forEach is for arrays only, not a nodelist. try a for loop:

for(var i = 0; i < divs.length; i++){
  console.log(divs[0])
}