This bug is actually pissing me off lol so i want to make a quiz game and each question will be updated based on the objects inside the question variable and everything is working but num.innerHTML = ${ques.id} and i do not know why
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div id="question">
<div id="num">1.</div>
<div id="ques">What is 10 x 10</div>
</div>
<div id="answers">
<div id="ans1" class="button">100</div>
<div id="ans2" class="button">40</div>
<div id="ans3" class="button">25</div>
<div id="ans4" class="button">1</div>
</div>
<div id="toggle">
<div id="prev">Prev</div>
<div id="next">Next</div>
</div>
</div>
<script src="script.js" async defer></script>
</body>
</html>
let score = 0
let i = 0
const prev = document.querySelector("#prev")
const next = document.querySelector("#next")
const num = document.querySelector("#num")
const q = document.querySelector("#question")
const ans1 = document.querySelector("#ans1")
const ans2 = document.querySelector("#ans2")
const ans3 = document.querySelector("#ans3")
const ans4 = document.querySelector("#ans4")
const questions = [
{
id: 1,
q: "What is the capital of Indonesia?",
a1: "Jakarta",
a2: "Bandung",
a3: "Surabaya",
a4: "Bali",
c: "Jakarta"
},
{
id: 2,
q: "Who won the 2017 NBA MVP Award?",
a1: "Lebron James",
a2: "Russell Westbrook",
a3: "Kawhi Leonard",
a4: "James Harden",
c: "Russell Westbrook"
}
]
function update(ques){
num.innerHTML = `${ques.id}`
q.innerHTML = ques.q
ans1.innerHTML = ques.a1
ans2.innerHTML = ques.a2
ans3.innerHTML = ques.a3
ans4.innerHTML = ques.a4
}
update(questions[0])