JS中if语句（null判断）与innerHTML属性修改异常问题求助

嘿，我看了你的代码，发现问题出在判断逻辑没覆盖所有空值场景上——这就是为啥你觉得两种分支没正常执行的原因！

问题根源 #

你的if条件只检查了name === null（也就是用户点击prompt弹窗的「取消」按钮时的情况），但如果用户点击「确定」却啥也没输入，这时候name的值是空字符串""，并不会触发第一个分支，反而会走到else里，显示Hello . Hope you are having an awesome day!这种奇怪的内容，看起来就像段落没被正确修改一样。

修正方案 #

我们只需要把判断条件改成同时处理null和空字符串的情况就行，最简单的写法是用if (!name)（因为null和空字符串在JS里都是“假值”），当然你也可以写得更明确：name === null || name === ""。

另外我还帮你优化了一些代码细节，让它更符合现代JS的写法，也更易读：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Time to practice: Adding elements with Javascript</title>
</head>
<body>
    <main></main>
    <script>
        // 修正body样式，用vh代替vw避免横向滚动，去掉默认margin
        document.body.style.cssText = 'height: 100vh; width: 100vw; margin: 0;';
        // 直接获取main元素，而不是赋值成style字符串
        const main = document.querySelector('main');
        main.style.cssText = 'background-color: white; height: 100vh; width: 100vw; display: flex; align-items: center; justify-content: center;';
        
        const style = document.createElement('style');
        style.innerHTML = `
            #mainP {
                font-size: 40px;
                text-align: center;
                padding: 0 20px;
            }
        `;
        document.head.appendChild(style);
        
        const name = prompt("What's your name?");
        const newP = document.createElement('p');
        newP.setAttribute('id', 'mainP');
        main.appendChild(newP);
        
        console.log(name);
        // 现在能同时处理取消（null）和空输入（""）的情况了
        if (!name) {
            newP.innerHTML = "I didn't even want to know your name anyway!";
        } else {
            // 用模板字符串代替拼接，更清爽
            newP.innerHTML = `Hello ${name}! Hope you are having an awesome day!`;
        }
    </script>
</body>
</html>

额外的小优化说明 #

• 把var换成了const：现代JS更推荐用这个，能避免意外的变量重赋值，代码更安全。
• 调整了布局：给main加了flex布局，让文本居中显示，字体大小也调小了一点，避免在小屏幕上溢出。
• 替换了字符串拼接：用${name}这种模板字符串写法，比'Hello ' + name + '.'可读性高多了。

现在你再测试一下：不管是点取消，还是啥也不输入就点确定，都会显示第一个分支的文本；输入名字后则会正常显示问候语，两种分支都能正常工作啦！

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