在HTML标头中制作可更改的变量

Question

所以我对javascript和html确实是新手，并且想知道我如何在"您的分数："

之后制作可更改的数字/变量

Your Score: </h1>

（</h1>之前）代码：

<style> #yourScore {
background-color: lightblue; color: black; padding: 40px; text-align: center;
}
</style>
<h1 id="yourScore">Your Score: </h1>

完整代码：https：//pastebin.com/tltjjerl

Answer 1

您可以使用vanilla javascript使用以下方式。

score = prompt("What is the score?");
document.getElementById("score").innerHTML = score;

.h1 {
  background-color: blue;
}

<h1> Your Score: <span id="score"></span></h1>

或我认为，您可以使用jQuery在下面使用更轻松的方法。

score = prompt("What is the score?");
$(".score").html(score);

.h1 {
  background-color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1> Your Score: <span class="score"></span></h1>

prompt()只是从您那里获取分数值的示例。您实际上并不需要在代码中。

Answer 2

使用香草javascript：

const yourScore = document.getElementById("your-score");
function updateYourScore(score) {
  yourScore.textContent = score;
}
updateYourScore(9);

<h1>Your Score: <span id="your-score"></span></h1>