My javaScript program is not running as it should and yet not showing any errors

Code Feedback
#1 
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viweport" content="width=device-width, initial-scale=1.0">

    <title>Ayo QuizTime</title>

<link href="css/style.css" rel="stylesheet" type="text/css">

  </head>

  <body>

      <div class="quest-container">
        <div class="quest-header">

        </div>

        <h2 id="quest">Quest To Complete</h2>
        <ul>

          <li><input type = "radio" id ="a" name ="Quest Complete">
            <label id = "quest_a" for="a"> Quest</label>

        </li>

          <li><input type = "radio" id ="b" name ="Quest Complete" >
            <label id = "quest_b" for="b"> Quest</label>

        </li>

          <li><input type = "radio" id ="c" name ="Quest Complete">
            <label  id = "quest_c"for="c"> Quest</label>

        </li>

          <li><input type = "radio" id ="d" name ="Quest Complete">
            <label id = "quest_d" for="d"> Quest</label>

        </li>

        </ul>

        <button> Load It</button>

    </div>

  </body>

<script src="js/script.js" type="text/javascript"></script>

</html>

@@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300&display=swap');

*{

box-sizing: border-box;

}
body {
  background-color: #3d7180;
  background-image: linear-gradient(315deg, #b8c6db 0%, #3d7180; 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins, sans-serif';
  margin: 0;
  min-height: 100vh;
}

.quest-container{
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1);
  width: 600px;
  max-width: 100%;
  overflow: hidden;
}

.quest-header {
  padding: 1rem;
}

h2 {
  margin: 0;
}

ul {

  list-style-type: none;
  padding: 0;
}

ul li{

  margin: 1rem 0;
  font-size: 1.1rem;

}

button {

  background-color: skyblue;
  border: none;
  color: white;
  display: block;
  font-family: inherit;
  width: 100%;
  padding: 1rem;
  font-size: 1.5rem;
  cursor: pointer;

}

button:hover {

  background-color: #213252;

}

const questData = [

{
  question: 'How To Kill The Boss Monster?',

    a: 'Healing Magic',
    b: 'Fully Charged Finishing Move',
    c: 'Run Away',
    d: 'Let Him Kill You',

    correct: 'b'
},

 {

  question:'Who is Kira?',

  a: 'He is also know as Light Yagami',
  b: 'Dont Know, Dont Care',
  c: 'The MC from SAO',
  d: 'He is the villain from SAO',

  correct: 'c'

},

{

  question: 'Who is Luffy?',

  a: 'The MC from One Piece',
  b: 'He is also know as Ace',
  c: 'Dont Know, Dont Care',
  d: 'He is the villain from SAO',

  correct: 'a'

},

{
  question: 'Who is Goku?',

  a: 'He is the villain from Yu-Gi-OH!',
  b: 'He is also know as Vegita',
  c: 'Dont Know, Dont Care',
  d: 'The MC from Dragon Ball series',

  correct: 'd'

},

{

  question: 'What does COD stands for?',
  a: 'Call Of Dance',
  b: 'Call Out Day',
  c: 'Call Of Duty',
  d: 'Call Of Death',

  correct: 'c'

}
];

const questEl = document.getElementById("quest");

const quest_a = document.getElementById('quest_a');
const quest_b = document.getElementById('quest_b');
const quest_c = document.getElementById('quest_c');
const quest_d = document.getElementById('quest_d');

let currentQuest = 0;


loadQuest();


function loadQuest() {

  const currentQuestData = questData [currentQuest];

  questEl.innerText = currentQuestData.quest;

  quest_a.innerText = currentQuestData.a;
  quest_b.innerText = currentQuestData.b;
  quest_c.innerText = currentQuestData.c;
  quest_d.innerText = currentQuestData.d;


  currentQuest++;
}
#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

#3

Thank you for doing that, really appreciate it.

#4

There is no quest property on your currentQuestData objects, you only have a question property.

#5

So this line,

  <h2 id="quest">Quest To Complete</h2>

has nothing to do with this

const questEl = document.getElementById("quest");

and the correct line of code should be

questionEl.innerText = currentQuizData.question;

sorry, a bit confused to be honest.

#6

Yes! that actually fixed the it, thank you very much for the advice

#7

The first line is your HTML element (h2 with id of quest), and you’re using the second line to target that element with JavaScript and change the text within the element.

Almost :smiley:
Your element is still questE1 because you named it like that in the second line. But if you scroll through your currentQuizDatas, you’ll see that if you want to display the text of the question, you’ll have to get it with currentQuizData.question. currentQuizData.quest would return undefined because it is, well, not defined on the object.

EDIT See you figured it out by yourself, keep going :love_you_gesture:

#8

This was the correct line, thank you again for the advice, the program runs perfectly now :grin:

#9