JavaScript is not working on my beginner quiz website - Html

Beast
April 15, 2023
153 views
0 votes
2 Answers

I am trying to learn JS by building a project and I am midway through and the JavaScript doesn’t seem to be working as question object and answer objects are not displayed in the html file even though they should be displayed. Here is the link to the YT vid I am basing my work off: https://www.youtube.com/watch?v=PBcqGxrr9g8
Here are the codes for html and Js:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
 <link rel="stylesheet" href="quiz.css">
</head>
<body>
  <div class="app">
   <h1>Quiz</h1>
   <div class="quiz">
   <div class="question" id="question">Here is the question</div>
   <div id="answer-buttons">
  <button class="answer-btn" id="answer-btn">First answer-btn</button>
  <button class="answer-btn" id="answer-btn">Second answer-btn</button>
  <button class="answer-btn" id="answer-btn">Third answer-btn</button>
  <button class="answer-btn" id="answer-btn">Fourth answer-btn</button>
  <button class="nextbtn" id="nextbtn">Next</button>
</div>
</div>
</div> 
  
</body>
<script src="quiz.js"></script>
</html>

const questions={
    question:'Which teams has the most titles in the English Premier Leauge?',
    answers:[
        { text:"Liverpool", correct:false},
        {text: "Manchester United", correct:true},
        {text:"Chelsea",correct:false},
        { text:"Manchester City", correct:false},
    ],
    question:"Who is the top scorer in the history of the English Premier League?",
answers: [
{ text:"Alan Shearer", correct:true},
{text: "Wayne Rooney", correct:false},
{text:"Thierry Henry",correct:false},
{ text:"Andrew Cole", correct:false},
],
question: "Which team has won the most consecutive English Premier League titles?",
answers: [
{ text:"Arsenal", correct:false},
{text: "Manchester United", correct:true},
{text:"Chelsea",correct:false},
{ text:"Manchester City", correct:false},
],
question: "Who has won the most English Premier League Manager of the Season awards?",
answers: [
{ text:"Sir Alex Ferguson", correct:true},
{text: "Pep Guardiola", correct:false},
{text:"Arsène Wenger",correct:false},
{ text:"José Mourinho", correct:false},
],
question: "Which English Premier League team has won the most FA Cup trophies?",
answers: [
{ text:"Liverpool", correct:false},
{text: "Arsenal", correct:true},
{text:"Chelsea",correct:false},
{ text:"Manchester United", correct:false},
],
question: "Who holds the record for the fastest hat-trick in the English Premier League?",
answers: [
{ text:"Sadio Mane", correct:false},
{text: "Robbie Fowler", correct:true},
{text:"Alan Shearer",correct:false},
{ text:"Michael Owen", correct:false},
]
}
const questionElement=document.getElementById('question');
const answerButton=document.getElementById('answer-buttons');
const nextButton=document.getElementById('nextbtn');

let currentQuestionIndex=0;
let score=0;
 
function startQuiz(){
    currentQuestionIndex=0;
    score=0;
    nextButton.innerHTML='Next';
    showQuestion();
}
function showQuestion(){
    let currentQuestion=questions[currentQuestionIndex];
    let questionnumber=currentQuestionIndex+1;
    questionElement.innerHTML=questionnumber +'.'+currentQuestion.question;
      
     currentQuestion.answers.forEach(answer =>{
        const button=document.createElement('button');
        button.innerHTML=answer.text;
        button.classList.add('btn');
        answerButton.appendChild(button);
     });

}
startQuiz();

The orginal div should be replaced by the objects in the Js file but doesnot seem to be working

Tags: html javascript

Answers

Add JavaScript in <script>Add here JavaScript</script> and also move this <script> tag above the close </body> tag.

Updated Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
 <link rel="stylesheet" href="quiz.css">
</head>
<body>
  <div class="app">
   <h1>Quiz</h1>
   <div class="quiz">
   <div class="question" id="question">Here is the question</div>
   <div id="answer-buttons">
  <button class="answer-btn" id="answer-btn">First answer-btn</button>
  <button class="answer-btn" id="answer-btn">Second answer-btn</button>
  <button class="answer-btn" id="answer-btn">Third answer-btn</button>
  <button class="answer-btn" id="answer-btn">Fourth answer-btn</button>
  <button class="nextbtn" id="nextbtn">Next</button>
</div>
</div>
</div> 
<script src="quiz.js"></script>
<script>
const questions={
    question:'Which teams has the most titles in the English Premier Leauge?',
    answers:[
        { text:"Liverpool", correct:false},
        {text: "Manchester United", correct:true},
        {text:"Chelsea",correct:false},
        { text:"Manchester City", correct:false},
    ],
    question:"Who is the top scorer in the history of the English Premier League?",
answers: [
{ text:"Alan Shearer", correct:true},
{text: "Wayne Rooney", correct:false},
{text:"Thierry Henry",correct:false},
{ text:"Andrew Cole", correct:false},
],
question: "Which team has won the most consecutive English Premier League titles?",
answers: [
{ text:"Arsenal", correct:false},
{text: "Manchester United", correct:true},
{text:"Chelsea",correct:false},
{ text:"Manchester City", correct:false},
],
question: "Who has won the most English Premier League Manager of the Season awards?",
answers: [
{ text:"Sir Alex Ferguson", correct:true},
{text: "Pep Guardiola", correct:false},
{text:"Arsène Wenger",correct:false},
{ text:"José Mourinho", correct:false},
],
question: "Which English Premier League team has won the most FA Cup trophies?",
answers: [
{ text:"Liverpool", correct:false},
{text: "Arsenal", correct:true},
{text:"Chelsea",correct:false},
{ text:"Manchester United", correct:false},
],
question: "Who holds the record for the fastest hat-trick in the English Premier League?",
answers: [
{ text:"Sadio Mane", correct:false},
{text: "Robbie Fowler", correct:true},
{text:"Alan Shearer",correct:false},
{ text:"Michael Owen", correct:false},
]
}
const questionElement=document.getElementById('question');
const answerButton=document.getElementById('answer-buttons');
const nextButton=document.getElementById('nextbtn');

let currentQuestionIndex=0;
let score=0;
 
function startQuiz(){
    currentQuestionIndex=0;
    score=0;
    nextButton.innerHTML='Next';
    showQuestion();
}
function showQuestion(){
    let currentQuestion=questions[currentQuestionIndex];
    let questionnumber=currentQuestionIndex+1;
    questionElement.innerHTML=questionnumber +'.'+currentQuestion.question;
      
     currentQuestion.answers.forEach(answer =>{
        const button=document.createElement('button');
        button.innerHTML=answer.text;
        button.classList.add('btn');
        answerButton.appendChild(button);
     });

}
startQuiz();
</script>
</body>
</html>

Try this. It must work fine.

The issue is that your data is an object, and you’re trying to access it like an array.

If you change the data to an array with n objects inside it you can then access each question/answer object with the currentQuestionIndex variable.

const questions=[
  {
    question:"Who holds the record for the fastest hat-trick in the English Premier League?",
    answers:[
      {text:"Sadio Mane",correct:!1},{text:"Robbie Fowler",correct:!0},
      {text:"Alan Shearer",correct:!1},{text:"Michael Owen",correct:!1}
    ]
  }
];

const questionElement = document.getElementById('question');
const answerButton = document.getElementById('answer-buttons');
const nextButton = document.getElementById('nextbtn');

let currentQuestionIndex = 0;
let score = 0;

function startQuiz() {
  currentQuestionIndex = 0;
  score = 0;
  nextButton.innerHTML = 'Next';
  showQuestion();
}

function showQuestion() {
  let currentQuestion = questions[currentQuestionIndex];
  let questionnumber = currentQuestionIndex + 1;
  questionElement.innerHTML = questionnumber + '.' + currentQuestion.question;

  currentQuestion.answers.forEach(answer => {
    const button = document.createElement('button');
    button.innerHTML = answer.text;
    button.classList.add('btn');
    answerButton.appendChild(button);
  });

}
startQuiz();

<div class="app">
  <h1>Quiz</h1>
  <div class="quiz">
    <div class="question" id="question">Here is the question</div>
    <div id="answer-buttons">
      <button class="answer-btn" id="answer-btn">First answer-btn</button>
      <button class="answer-btn" id="answer-btn">Second answer-btn</button>
      <button class="answer-btn" id="answer-btn">Third answer-btn</button>
      <button class="answer-btn" id="answer-btn">Fourth answer-btn</button>
      <button class="nextbtn" id="nextbtn">Next</button>
    </div>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

JavaScript is not working on my beginner quiz website – Html

Answers