innerHTML 尽管被调用但未显示

Question

这个错误实际上让我很生气，哈哈，所以我想制作一个问答游戏，每个问题都将根据问题变量内的对象进行更新，一切正常，但 num.innerHTML =

${ques.id}

，我不知道为什么

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])

<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>

Answer 1

#num

包含在

#question

中，并且您正在更新整个

#question

innerHTML。

解决方案，使用

#ques

：

const q = document.querySelector("#ques");