Question

我有一个在最后显示最终得分的问题，我可以通过很多方式去做，但我不确定什么是最好的。

正如您所看到的，下一个按钮只是显示/隐藏div而不是页面。得分是一个id，所以显然只出现一次，它在show / hide之外。

我如何隐藏最后一个div上的id并在结束段落中显示得分？

我想过将得分范围更改为名称，然后将得分放在除最后一个之外的每个div中，但是即使使用

，得分也没有更新

document.getElementsByName("score").innerHTML = score;

而不是

document.getElementById("score").innerHTML = score;

但没有运气。

有关如何解决此问题的任何想法？

Answer 1

为什么不简单地更新两个字段，使用两个不同的ID？我的意思是，最后一页的得分摘要可能是

<table class="widthOneHundredPercent">
  <p>Your score is:<span id="finalScore"></span></p>
</table>

每次更新始终可见的内容时都可以更新它，比如

$("#score").html(score);
$("#finalScore").html(score);

您可以找到工作示例here

它回答了你的问题吗？

<强>编辑：

您还可以使用更短的方式来更新这两个值：

$("#score, #finalScore").html(score);

<强> Edited2：对于隐藏高分部分（你称之为scoreBoard）的问题，对于你的上一个“下一个”按钮，使用以下代码：

<input type="button" value="next" onclick="$('#scoreBoard').hide();pagechange(3,4); scrollToTop(); "/>

Answer 2

只需将您的HTML更改为：

<p>Your score is: <span id="finalscore"></span></p>

和你的javascript：

$("#score").html(score);
$("#finalscore").html(score);

要隐藏最终页面顶部的分数，请更改：

  <input type="button" value="next" onclick="pagechange(3,4); scrollToTop();"/></center>

为：

  <input type="button" value="next" onclick="pagechange(3,4); scrollToTop(); hideScoreBoard();"/></center>

然后添加这些你的javascript：

function hideScoreBoard() {
  $("#scoreBoard").hide();
}

function scrollToTop() {
}

注意我添加了一个空的scrollToTop()来阻止错误，以便上述更改有效。