使用getElementById实现闪卡文字颜色切换功能求助

我明白你要做的是那种点击复选框就能切换答案显隐的闪卡，而且要求严格用getElementById、每个答案唯一ID对吧？之前的代码应该是踩了函数名不匹配、样式属性设错的坑，我给你整理了一个完全符合要求的修正版：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 简单的闪卡样式，背景设为白色，方便答案初始隐藏 */
        .flashcard {
            margin: 15px 0;
            padding: 20px;
            background-color: #ffffff;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        /* 初始状态下答案颜色和背景一致（白色），实现隐藏 */
        .answer {
            color: #ffffff;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <!-- 闪卡1 -->
    <div class="flashcard">
        <label>
            <input type="checkbox" onchange="toggleAnswer('answer1')">
            问题1：HTML的全称是什么？
        </label>
        <div id="answer1" class="answer">超文本标记语言（HyperText Markup Language）</div>
    </div>

    <!-- 闪卡2 -->
    <div class="flashcard">
        <label>
            <input type="checkbox" onchange="toggleAnswer('answer2')">
            问题2：CSS中用来设置文本颜色的属性是什么？
        </label>
        <div id="answer2" class="answer">color属性</div>
    </div>

    <script>
        // 统一的切换函数，严格使用getElementById获取答案元素
        function toggleAnswer(answerId) {
            const answerElement = document.getElementById(answerId);
            // 根据复选框的选中状态切换颜色
            if (event.target.checked) {
                answerElement.style.color = "#000000"; // 显示：黑色
            } else {
                answerElement.style.color = "#ffffff"; // 隐藏：和背景同色
            }
        }
    </script>
</body>
</html>

关键修正点&说明 #

• 函数名匹配：HTML里复选框的onchange调用的toggleAnswer和JS里定义的函数完全一致，解决了之前函数名不匹配的问题
• 唯一ID设置：每个答案元素都有专属ID（answer1、answer2），确保getElementById能精准定位
• 样式属性修正：通过修改color属性实现显隐，而不是错误地用display或其他属性，完全符合你“初始和背景同色，切换为黑色”的需求
• 复选框开关逻辑：利用复选框的checked状态判断切换方向，实现一键开关，比按钮更符合你的理想方案
• 严格遵循规则：全程只用getElementById获取元素，没有使用任何类选择器

你可以直接把这段代码拿去用，要是需要调整背景色，只要把初始的color值改成和背景一样的颜色就行~

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