为何调用winOrNot(false)时无法隐藏指定HTML div？

嘿，我来帮你拆解这两个问题的根源，以及对应的修复方案：

问题1：传入false时无法隐藏div的原因 #

你的代码里false分支的逻辑根本没写完——从注释能看出来，你只写了if the valu...就中断了，没有添加任何实际隐藏元素的代码，所以调用winOrNot(false)时，浏览器根本不知道要执行什么隐藏动作。

另外，哪怕是true的分支，当前代码也只是用document.getElementById('winner')获取了DOM元素，但没有做任何显示相关的操作——等于白拿了元素，没告诉浏览器要把它显示出来。

问题2：无法隐藏"Congratulations!"消息的原因 #

本质上和第一个问题是同一个根源：没有对id="winner"的div执行隐藏逻辑。这个div里的消息是它的内容，只要div本身被隐藏，里面的文本自然会跟着消失，所以核心还是要补全隐藏元素的代码。

修复后的完整代码 #

我把你的代码补全并做了小优化，解决了所有问题：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <div id="winner">Congratulations!</div>
    <script>
        // 把参数名改成isWinner，避免和元素id/函数变量名冲突
        function winOrNot(isWinner) {
            // 先获取目标元素，避免重复查询DOM
            const winnerElement = document.getElementById('winner');
            
            if(isWinner) {
                // 显示元素：设置display为block（根据布局需求也可以用inline/inline-block）
                winnerElement.style.display = 'block';
            } else {
                // 隐藏元素：设置display为none，元素会完全从页面布局中消失
                winnerElement.style.display = 'none';
            }
        }

        // 测试：传入false，隐藏恭喜消息
        winOrNot(false);
        // 要是想显示的话，调用这个就行
        // winOrNot(true);
    </script>
</body>
</html>

额外的小优化说明 #

• 把函数参数名从winner改成了isWinner，避免和你之前用var winner = function...定义的函数变量名、以及元素idwinner冲突，让代码更清晰。
• 提前获取一次DOM元素，不用在每个分支里重复查询，稍微提升了一点性能。
• 明确设置style.display属性，这是控制元素显示/隐藏最直接的标准方法。

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