问答游戏中num.innerHTML赋值后内容不显示问题求助

我正在开发一款问答游戏，打算根据questions变量里的对象更新每道题目。目前其他元素的innerHTML赋值都正常生效，但num.innerHTML = ${ques.id}``这行代码的效果显示不出来，找不到原因。相关代码如下：

JavaScript代码 #

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: "印度尼西亚的首都是哪里？",
    a1: "雅加达",
    a2: "万隆",
    a3: "泗水",
    a4: "巴厘岛",
    c: "雅加达"
  },
  {
    id: 2,
    q: "谁获得了2017年NBA MVP奖？",
    a1: "勒布朗·詹姆斯",
    a2: "拉塞尔·威斯布鲁克",
    a3: "科怀·伦纳德",
    a4: "詹姆斯·哈登",
    c: "拉塞尔·威斯布鲁克"
  }
]

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

HTML代码 #

<div class="container">
  <div id="question">
    <div id="num">1.</div>
    <div id="ques">10乘以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">上一题</div>
    <div id="next">下一题</div>
  </div>
</div>

问题出在元素选择和赋值逻辑上：

• 你用const q = document.querySelector("#question")选中了整个题目容器，之后在update函数里执行q.innerHTML = ques.q，这会直接把#question内部的所有子元素（包括刚赋值的#num）全部替换成题目文本，导致num的内容被覆盖，自然看不到效果。

只需要修改一行JS代码就能解决：把选中题目文本的元素从#question改成#ques（也就是HTML里专门放题目内容的div）。

修改后的JS代码片段：

// 替换原有的const q = document.querySelector("#question")
const q = document.querySelector("#ques")

这样update函数里的q.innerHTML = ques.q只会更新#ques里的文本，不会影响#num元素，之前给num赋值的内容就能正常显示了。

内容的提问来源于stack exchange，提问作者TheComic2222