Uncaught TypeError错误排查：无法通过innerHTML导入prompt数据至HTML

错误原因 #

1. DOM加载时机问题：你的JavaScript代码如果在<h2 id="surName">元素之前执行，浏览器还没解析到这个元素，document.querySelector("#surName")会返回null，此时访问null的innerHTML就会触发Cannot read properties of null错误。
2. 变量误用：最后一行代码里拼接的是DOM元素对象surName，而不是用户输入的名字变量fullName，这会导致页面插入元素的字符串形式（比如[object HTMLHeadingElement]），而非预期的用户名。

修正方案 #

方案1：将JS代码放在HTML元素之后执行 #

把JavaScript代码移到<h2>元素的后面，确保浏览器先解析到目标元素再执行JS：

<h2 id="surName">Javascript Prompt</h2>
<script>
let fullName = prompt("Please enter your name :")
let surName = document.querySelector("#surName")
// 替换surName为fullName，正确插入用户输入的名字
surName.innerHTML = `${surName.innerHTML} ${fullName}`
</script>

方案2：用DOMContentLoaded事件监听DOM加载完成 #

如果需要把JS放在页面头部，可通过监听DOMContentLoaded事件，确保DOM加载完成后再执行代码：

document.addEventListener('DOMContentLoaded', function() {
  let fullName = prompt("Please enter your name :")
  let surName = document.querySelector("#surName")
  surName.innerHTML = `${surName.innerHTML} ${fullName}`
})

方案3：给script标签添加defer属性 #

在引入JS的<script>标签上添加defer属性，浏览器会在DOM解析完成后再执行该脚本：

<script defer>
let fullName = prompt("Please enter your name :")
let surName = document.querySelector("#surName")
surName.innerHTML = `${surName.innerHTML} ${fullName}`
</script>
<h2 id="surName">Javascript Prompt</h2>

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