零基础开发生日网页：如何实现输入正确答案后显示图片？

嘿，完全不用不好意思，新手刚开始写JS遇到这种问题太正常啦！我来帮你把功能补全，顺便优化下原来的代码逻辑（原来的while(1)是死循环，答错了会一直弹提示，体验不太好）。

完整代码示例 #

先直接给你可以用的完整代码，你只需要替换几个地方就行：

<!DOCTYPE html>
<html>
<head>
    <title>给朋友的生日惊喜</title>
    <style>
        /* 让图片一开始隐藏，答对了再显示 */
        #birthday-surprise {
            display: none;
            max-width: 80%;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <!-- 用来放惊喜图片的标签，默认隐藏 -->
    <img id="birthday-surprise" src="你的生日图片路径.jpg" alt="超棒的生日惊喜！">

    <script>
        // 用do-while循环，允许用户多次尝试，也能点击取消退出
        let userAnswer;
        do {
            userAnswer = prompt("这里写你的问题哦，比如：我最喜欢的动漫角色是谁？");
            
            // 如果用户点击了取消，直接退出循环
            if (userAnswer === null) {
                break;
            }

            // 判断答案是否正确
            if (userAnswer === "你的正确答案") { // 替换成你设定的正确答案
                // 找到图片元素，把它显示出来
                document.getElementById("birthday-surprise").style.display = "block";
                alert("答对啦！快看看这份惊喜🥳");
                break; // 答对了就退出循环，不用再提问
            } else {
                alert("哎呀，答案不对哦，再试一次！");
            }
        } while (true);
    </script>
</body>
</html>

需要你替换的地方 #

• 把prompt里的问题文本改成你想提问的内容，比如"我和你第一次见面的地方是哪里？"
• 把"你的正确答案"替换成你设定的正确答案，比如"学校门口的奶茶店"
• 把src="你的生日图片路径.jpg"换成你要展示的图片路径：如果是本地图片，直接放和HTML文件同文件夹的图片文件名就行；如果是在线图片，直接粘贴图片的URL。

代码逻辑解释 #

1. HTML部分：我们加了一个img标签，给它一个唯一的id（方便JS找到它），用CSS的display: none让它一开始隐藏。
2. JS部分：
   • 用do-while循环代替原来的死循环，这样用户可以多次尝试回答，也能通过点击prompt的“取消”按钮退出。
   • 当用户输入正确答案时，通过document.getElementById("birthday-surprise")找到图片元素，把它的display样式改成block，图片就会显示出来啦！
   • 答错的时候会弹出提示，让用户再试一次。

这样你的生日网页就能正常工作啦，祝你的朋友生日快乐！😊

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