通过按钮点击切换class为answer的段落字体颜色

嘿，我发现你的代码里的问题啦！document.getElementsByClassName("answer")返回的是一个HTMLCollection（元素集合），不是单个DOM元素，所以你直接给x.style.color赋值是不会生效的——你得遍历这个集合里的每一个元素，逐个设置字体颜色才行。

下面是修正后的完整代码：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8">
    <title>Book Title</title>
    <script>
        function showFunction() {
            // 获取所有class为answer的元素集合
            var answers = document.getElementsByClassName("answer");
            // 遍历集合，逐个设置颜色
            for (var i = 0; i < answers.length; i++) {
                answers[i].style.color = "black";
            }
        }
        function hideFunction() {
            var answers = document.getElementsByClassName("answer");
            for (var i = 0; i < answers.length; i++) {
                answers[i].style.color = "white";
            }
        }
    </script>
    <style>
        /* 给body加个背景色，让隐藏效果更直观 */
        body {
            background-color: white;
        }
    </style>
</head>
<body>
    <h1>Book Title </h1>
    <p class="question"> This is a question. </p>
    <p class="answer">This is an answer. </p>
    <br />
    <div>
        <label>Check Answer:</label>
        <button onclick="showFunction()">Show Answer</button>
        <button onclick="hideFunction()">Hide Answer</button>
    </div>
</body>
</html>

额外优化小建议 #

如果你觉得for循环有点繁琐，也可以用document.querySelectorAll('.answer')来获取元素，它返回的NodeList支持forEach方法，代码会更简洁：

function showFunction() {
    document.querySelectorAll('.answer').forEach(answer => {
        answer.style.color = "black";
    });
}
function hideFunction() {
    document.querySelectorAll('.answer').forEach(answer => {
        answer.style.color = "white";
    });
}

这样不管页面里有多少个.answer段落，都能被正确设置颜色啦～

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