在JavaScript中使用两个prompt()获取用户数据时触发报错如何解决？

你修改#8ball元素的innerHTML属性时，会直接清空该元素内部所有原有DOM结构，原本嵌套在其中的<p id="ballQ"></p>节点会被完全删除。后续执行document.getElementById("ballQ")时会返回null，对null设置innerHTML就会触发你遇到的报错。
删除获取用户名的prompt()代码后，你同步去掉了修改#8ball元素innerHTML的逻辑，ballQ节点没有被清除，所以代码可以正常运行。

方案1：修改HTML预留单独节点（推荐） #

给问候语新增独立的展示节点，避免覆盖其他子元素：
HTML调整为：

<div id="8ball">
  <p id="greetText"></p>
  <p id="ballQ"></p>
  <div id="8BallResult"></div>
</div>

JS调整为：

const userName = prompt("What is your name?", "Victor");
let userQuestion = prompt("Enter a question", "Can I sleep with my Boss?");
document.getElementById("greetText").innerHTML = userName.length > 1 ? "Hello " + userName + "!" : "Hello!";
document.getElementById("ballQ").innerHTML = userName + " " + userQuestion;

方案2：不修改HTML，追加内容而非覆盖 #

使用insertAdjacentHTML方法向父元素追加内容，保留原有内部节点：

const userName = prompt("What is your name?", "Victor");
let userQuestion = prompt("Enter a question", "Can I sleep with my Boss?");
const greetContent = userName.length > 1 ? "Hello " + userName + "!" : "Hello!";
// afterbegin表示插入到父元素内部最开头
document.getElementById("8ball").insertAdjacentHTML("afterbegin", greetContent);
document.getElementById("ballQ").innerHTML = userName + " " + userQuestion;

方案3：拼接完整内容后再赋值 #

如果需要直接覆盖父元素内容，就把所有子元素的内容也拼接到新的innerHTML中：

const userName = prompt("What is your name?", "Victor");
let userQuestion = prompt("Enter a question", "Can I sleep with my Boss?");
const greetContent = userName.length > 1 ? "Hello " + userName + "!" : "Hello!";
document.getElementById("8ball").innerHTML = greetContent + '<p id="ballQ">' + userName + " " + userQuestion + '</p><div id="8BallResult"></div>';

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