在 HTML Header 中创建一个可变变量

Question

所以我对 javascript 和 html 真的很陌生，想知道如何在 "Your Score:"

之后制作一个可变的 number/variable

Your Score: </h1>

（在 </h1> 之前）代码：

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

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>

Make a changable variable in a HTML Header