打开网页时JavaScript代码无法运行，如何排查解决？

我帮你揪出这段代码里的几个关键问题，顺便给你把坑都填上：

1. DOM加载顺序导致的元素获取失败 #

你的脚本直接写在HTML中，很大概率页面还没加载完#display、#txt这些元素，脚本就已经执行了。这时候document.getElementById("display")会返回null，自然没法设置innerHTML，直接导致初始化失败。

修复办法：
把脚本放到</body>标签的末尾，或者用DOMContentLoaded事件包裹初始化逻辑，确保元素加载完成后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  const displayEl = document.getElementById("display");
  const savedNotes = localStorage.getItem("notes");
  displayEl.innerHTML = savedNotes || ''; // 提前处理null的情况
});

2. localStorage初始值为null的拼接问题 #

用户第一次打开页面时，localStorage.getItem("notes")会返回null。这时候你直接用null + 输入内容，会得到"nullxxx<br>"这种奇怪的内容，而且后续每次拼接都会带着这个null前缀。

修复办法：
每次获取本地存储的内容时，先判断是否为null，默认设为空字符串：

// 在noteIt函数里修改
const currentNotes = localStorage.getItem("notes") || '';
localStorage.setItem("notes", currentNotes + document.getElementById("txt").value + "<br>");

3. reset函数的语法错误 #

你的reset函数里，localStorage.setItem("notes", "")后面少了个分号;——虽然浏览器可能会容错，但严格模式下会直接报错，这也是个容易忽略的小问题。

修复办法：
补上分号，规范代码：

function reset() {
  localStorage.setItem("notes", "");
  document.getElementById("display").innerHTML = localStorage.getItem("notes");
}

4. 额外提醒：潜在的XSS风险 #

直接把用户输入的内容通过innerHTML插入页面，存在跨站脚本攻击的风险——如果用户输入了<script>之类的恶意代码，会被浏览器直接执行。

优化建议：
如果只是显示纯文本笔记，改用textContent代替innerHTML；如果需要保留换行，可以把换行转成<br>，同时转义HTML特殊字符：

// 新增一个转义函数
function escapeHtml(text) {
  return text.replace(/[&<>"']/g, function(match) {
    const escapeMap = {
      '&': '&amp;',
      '<': '&lt;',
      '>': '&gt;',
      '"': '&quot;',
      "'": '&#039;'
    };
    return escapeMap[match];
  });
}

// 在noteIt函数里使用转义后的内容
const userInput = escapeHtml(document.getElementById("txt").value);
// 把用户输入的换行转成<br>
const formattedInput = userInput.replace(/\n/g, '<br>');
localStorage.setItem("notes", currentNotes + formattedInput);

完整修复后的代码 #

整合所有修复点后的完整代码如下，还额外加了清空输入框的逻辑，提升用户体验：

<textarea id="txt" rows="5" cols="50"></textarea>
<button onclick="noteIt()">保存笔记</button>
<button onclick="reset()">重置笔记</button>
<div id="display" style="margin-top:10px; padding:10px; border:1px solid #ccc;"></div>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const displayEl = document.getElementById("display");
  const savedNotes = localStorage.getItem("notes");
  displayEl.innerHTML = savedNotes || '';
});

function escapeHtml(text) {
  return text.replace(/[&<>"']/g, match => ({
    '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#039;'
  }[match]));
}

function noteIt() {
  const currentNotes = localStorage.getItem("notes") || '';
  const userInput = escapeHtml(document.getElementById("txt").value);
  const formattedInput = userInput.replace(/\n/g, '<br>');
  localStorage.setItem("notes", currentNotes + formattedInput + '<br>');
  document.getElementById("display").innerHTML = localStorage.getItem("notes");
  // 清空输入框
  document.getElementById("txt").value = '';
}

function reset() {
  localStorage.setItem("notes", "");
  document.getElementById("display").innerHTML = '';
}
</script>

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