当我打开网页时，为什么JavaScript不会运行？

Question

<script>
document.getElementById("display").innerHTML = localStorage.getItem("notes");
function noteIt() {
localStorage.setItem("notes", localStorage.getItem("notes") + document.getElementById("txt").value + "<br>");
document.getElementById("display").innerHTML = localStorage.getItem("notes");
}
function reset() {
localStorage.setItem("notes", "")
document.getElementById("display").innerHTML = localStorage.getItem("notes");
}
</script>

<textarea id="txt"></textarea><br>
<button onClick="noteIt()">Note It!</button>
<button onClick="reset()">Reset!</button><br>
<p id="display"></p>

使用此代码，问题是当我在变量中有数据时，“备注”当我重新加载网页时，js顶部的行将不会运行。如果我输入“嗨”到textarea并按下“注意它！”，当我重新加载浏览器时，我看不到文字，“嗨”出现在我的屏幕上。

有人可以帮帮我吗？ 提前谢谢！

Answer 1

是的，发生这种情况是因为<script>位于您定位的元素之前。

浏览器遇到<script>标记后立即运行JavaScript代码。代码执行时未加载p#display。这就是你的代码失败的原因。