can't get my array to output its value, using the index number

Question

I'm building a very simple quiz and I've hit a small wall. So my structure is that I've made 5 questions (using radio buttons) giving the correct radio button an ID, and then in JavaScript I'd target those radio buttons. But the answers I'd store in a array. I've tested it out on the first question to see if the array index would work in my if statement but it does not. For example: if(radio1.checked === answers[0]) then it should alert saying that its correct. But instead it does my else statement, not sure how I could go by doing this, any suggestions?

SIDE NOTE: I'm new to JavaScript so I want to learn how to use arrays properly

var score = 0; 
var radio1 = document.getElementById('correctradio1'); 
var submit = document.getElementById('submit'); 

submit.addEventListener('click', function quiz(){
var answers = ['Yellow', 'Donald trump', 'Michael Jackson', 'red', 'Oscar'];
	if(radio1.checked === answers[0]) {
  	document.getElementById('results').innerHTML = "yes thats correct";
  }else{
  	alert('nope');
  }
});

<h2>
Knowlegde Quiz
</h2>
<br>

<p>What is the color of the sun?</p>
<input type="radio" name="selection" id="correctradio1"> Yellow<br>
<input type="radio" name="selection" > Green<br>
<input type="radio" name="selection" > Blue

<p>Who is the President?</p>
<input type="radio" name="selection" id="correctradio2"> Donald trump<br>
<input type="radio" name="selection"> Beyonce<br>
<input type="radio" name="selection"> Blue Ivy

<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="selection"> Marvin gaye<br>
<input type="radio" name="selection"> Toni braxton<br>
<input type="radio" name="selection" id="correctradio3"> Michael Jackson

<p>What color is Elmo?</p>
<input type="radio" name="selection"> Green<br>
<input type="radio" name="selection"> pink<br>
<input type="radio" name="selection" id="correctradio4"> red


<p>Who created the Muppets?</p>
<input type="radio" name="selection"> Elmo<br>
<input type="radio" name="selection" id="correctradio5"> Jim Henson<br>
<input type="radio" name="selection"> Oscar<br><br>

<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>

Answer 1

Radio buttons need to have a value set for them so that it has meaning when you select one. That value is what you want to compare against your array values. Your code tries to compare the true/false value of the checked property against the answers in your array, which will always result in an incorrect answer because true (the value of the checked property on the checked radio button) is not one of the correct answers.

Next, if you always compare the value of the "correct answer" radio button against the correct answers, you'll never get a wrong answer. When the submit button is pressed, you need to look for which button (from each group) was checked and compare each value against the corresponding correct answer in the array.

Additionally, each group of radio buttons must have a name that is different from the other groups, so that each group can have one choice selected. Right now, in your code, you can only select one radio button from all the choices.

var score = 0;  
var submit = document.getElementById('submit'); 
var result = document.getElementById('results')
var answers = ['Yellow', 'Donald Trump', 'Michael Jackson', 'red', 'Oscar'];

submit.addEventListener('click', function quiz(){
  // You need to get the checked radio button at the time that the submit button is pressed.
  var checkedRadioButton1 = document.querySelector("input[name='selection1']:checked");

  // Compare the *value* of the radio button against the value in the array.
  if(checkedRadioButton1.value == answers[0]) {
    result.textContent = "yes thats correct";
  }else{
    alert('nope');
  }
});

<h2>
Knowlegde Quiz
</h2>

<p>What is the color of the sun?</p>
<input type="radio" name="selection1" id="correctradio1" value="Yellow"> Yellow<br>
<input type="radio" name="selection1" value="Green"> Green<br>
<input type="radio" name="selection1" value="Blue"> Blue

<p>Who is the President?</p>
<input type="radio" name="selection2" id="correctradio2" value="Donald trump"> Donald Trump<br>
<input type="radio" name="selection2" value="Beyonce"> Beyonce<br>
<input type="radio" name="selection2" value="Blue Ivy"> Blue Ivy

<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="selection3" value="Marvin Gaye"> Marvin gaye<br>
<input type="radio" name="selection3" value="Toni Braxton"> Toni braxton<br>
<input type="radio" name="selection3" value="Michael Jackson" id="correctradio3"> Michael Jackson

<p>What color is Elmo?</p>
<input type="radio" name="selection4" value="green"> Green<br>
<input type="radio" name="selection4" value="pink"> pink<br>
<input type="radio" name="selection4" value="red" id="correctradio4"> red


<p>Who created the Muppets?</p>
<input type="radio" name="selection5" value="Elmo"> Elmo<br>
<input type="radio" name="selection5" value="Jim Henson" id="correctradio5"> Jim Henson<br>
<input type="radio" name="selection5" value="Oscar"> Oscar<br><br>

<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>

While this is a good first approach for someone that is new to JavaScript, it really is pretty wasteful in terms of coding. A much more streamlined approach would be as follows (read the comments for explanation):

var score = 0;  
var submit = document.getElementById('submit'); 
var result = document.getElementById('results')
var incorrect = [];

// When comparing strings, remember that case matters. Store all the strings
// as lower case and then later, we'll compare lower case against lower case.
var answers = ['yellow', 'donald trump', 'michael jackson', 'red', 'jim henson'];

submit.addEventListener('click', function(){
  // Reset game
  incorrect = [];
  score = 0;

  // Get the checked radio button from each group and place into an array
  var checkedByGroup = Array.prototype.slice.call(document.querySelectorAll("input[type='radio']:checked"));

  // Count how many checks were made and if the user didn't answer all
  // the questions, exit with a message:
  if(checkedByGroup.length < answers.length){
    alert("You didn't answer all the questions!  Try again!");
    return;
  }
  
  // Now you have two arrays: one with all the correct answers and 
  // one with radio buttons. Both arrays have the same amount of items
  // and each index in each array corresponds to each other.
  
  // Loop through the correct answers:
  answers.forEach(function(value, index){
    // Compare the answer against the corresponding radio button array
    // Remember to compare lower case against lower case!

    if(checkedByGroup[index].value.toLowerCase() === value){
      score++; // Add a point
    } else {
      incorrect.push(index + 1); // Add question number to incorrect array 
    }
  });
  
  // If you didn't get a perfect score:
  if(score !== 5){
    // Tell the player which questions they got wrong
    alert("You got question(s) " + incorrect.join() + " wrong!");
  }
  
  // Either way, report the score
  result.textContent = "You got " + score  + " right!";
});

<h2>Knowlegde Quiz</h2>

<p>What is the color of the sun?</p>
<input type="radio" name="q1" value="Yellow"> Yellow<br>
<input type="radio" name="q1" value="Green"> Green<br>
<input type="radio" name="q1" value="Blue"> Blue

<p>Who is the President?</p>
<input type="radio" name="q2" value="Donald trump"> Donald Trump<br>
<input type="radio" name="q2" value="Beyonce"> Beyonce<br>
<input type="radio" name="q2" value="Blue Ivy"> Blue Ivy

<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="q3" value="Marvin Gaye"> Marvin gaye<br>
<input type="radio" name="q3" value="Toni Braxton"> Toni braxton<br>
<input type="radio" name="q3" value="Michael Jackson"> Michael Jackson

<p>What color is Elmo?</p>
<input type="radio" name="q4" value="green"> Green<br>
<input type="radio" name="q4" value="pink"> pink<br>
<input type="radio" name="q4" value="red"> red

<p>Who created the Muppets?</p>
<input type="radio" name="q5" value="Elmo"> Elmo<br>
<input type="radio" name="q5" value="Jim Henson"> Jim Henson<br>
<input type="radio" name="q5" value="Oscar"> Oscar<br><br>

<input type="submit" value="Submit Quiz" id="submit">
<h3 id="results"></h3>

Answer 2

Radio button need to have value and instead of using getElementById use querySelector. like below.

var score = 0; 

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

submit.addEventListener('click', function quiz(){
var radio1 = document.querySelector('input[name="selection"]:checked').value;
var answers = ['Yellow', 'Donald trump', 'Michael Jackson', 'red', 'Oscar'];

console.log(radio1);
	if(radio1 === answers[0]) {
  	document.getElementById('results').innerHTML = "yes thats correct";
  }else{
  	alert('nope');
  }
});

<h2>
Knowlegde Quiz
</h2>
<br>

<p>What is the color of the sun?</p>
<input type="radio" name="selection" id="correctradio1" value="Yellow"> Yellow<br>
<input type="radio" name="selection" value="Green"> Green<br>
<input type="radio" name="selection" value="Blue"> Blue<br>

<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct
</h3>

Answer 3

You're really close. You actually don't need the array of answers because you've already marked your answers with the class "correctradioX".

You can complete this by just adding each one into the if as I've done below.

var score = 0; 
var radio1 = document.getElementById('correctradio1'); 
var radio2 = document.getElementById('correctradio2');
var radio3 = document.getElementById('correctradio3');
var radio4 = document.getElementById('correctradio4');
var radio5 = document.getElementById('correctradio5');
var submit = document.getElementById('submit'); 

submit.addEventListener('click', function quiz(){
var answers = ['Yellow', 'Donald trump', 'Michael Jackson', 'red', 'Oscar'];
	if (radio1.checked && 
            radio2.checked && 
            radio3.checked && 
            radio4.checked && 
            radio5.checked) {
  	    document.getElementById('results').innerHTML = "yes thats correct";
    } else {
  	    alert('nope');
    }
});

<h2>
    Knowlegde Quiz
</h2>
<br>

<p>What is the color of the sun?</p>
<input type="radio" name="q1" id="correctradio1"> Yellow<br>
<input type="radio" name="q1" > Green<br>
<input type="radio" name="q1" > Blue

<p>Who is the President?</p>
<input type="radio" name="q2" id="correctradio2"> Donald trump<br>
<input type="radio" name="q2"> Beyonce<br>
<input type="radio" name="q2"> Blue Ivy

<p>Who was the lead singer in The Jackson 5?</p>
<input type="radio" name="q3"> Marvin gaye<br>
<input type="radio" name="q3"> Toni braxton<br>
<input type="radio" name="q3" id="correctradio3"> Michael Jackson

<p>What color is Elmo?</p>
<input type="radio" name="q4"> Green<br>
<input type="radio" name="q4"> pink<br>
<input type="radio" name="q4" id="correctradio4"> red


<p>Who created the Muppets?</p>
<input type="radio" name="q5"> Elmo<br>
<input type="radio" name="q5" id="correctradio5"> Jim Henson<br>
<input type="radio" name="q5"> Oscar<br><br>

<input type="submit" value="Submit Quiz" id="submit">
<h3>You got <span id="results"></span> correct</h3>