求助：JavaScript背景色切换正常，文字色切换代码失效问题

原文字色代码的问题点： #

• CSS样式写在了<script>标签内，浏览器无法识别，必须用<style>标签单独包裹样式
• 按钮标签未正确闭合，末尾应该是</button>
• 原代码只能一次性把文字改成红色，没法实现像背景色那样的多色循环切换

修复后的文字颜色循环切换代码（适配循环需求）： #

<script>
// 定义文字颜色数组
var textColors = ["red", "blue", "green", "purple"];
var textColorIndex = 0;

function changeTextColor() {
    var element = document.getElementById("questionContainer");
    if (textColorIndex >= textColors.length) {
        textColorIndex = 0;
    }
    // 直接修改元素的style.color属性，和背景色逻辑一致
    element.style.color = textColors[textColorIndex];
    textColorIndex++;
}
</script>

<div id="questionContainer"> 
    <p><strong><em> QUESTION: WHAT IS YOUR NAME?</em></strong></p>
</div>
<button onclick="changeTextColor()">切换文字颜色</button>

整合背景色+文字色双按钮的完整页面： #

<!DOCTYPE html>
<html>
<head>
    <title>颜色切换器</title>
</head>
<body id='body'>
    <div id="questionContainer"> 
        <p><strong><em> QUESTION: WHAT IS YOUR NAME?</em></strong></p>
    </div>
    <button onclick="changeBgColor()">切换背景颜色</button>
    <button onclick="changeTextColor()">切换文字颜色</button>

    <script>
        // 背景颜色切换逻辑
        var bgColors = ["red", "blue", "green", "yellow"];
        var bgColorIndex = 0;
        function changeBgColor() {
            var body = document.getElementById("body");
            if (bgColorIndex >= bgColors.length) {
                bgColorIndex = 0;
            }
            body.style.backgroundColor = bgColors[bgColorIndex];
            bgColorIndex++;
        }

        // 文字颜色切换逻辑
        var textColors = ["white", "black", "purple", "orange"];
        var textColorIndex = 0;
        function changeTextColor() {
            var container = document.getElementById("questionContainer");
            if (textColorIndex >= textColors.length) {
                textColorIndex = 0;
            }
            container.style.color = textColors[textColorIndex];
            textColorIndex++;
        }
    </script>
</body>
</html>

额外说明： #

如果偏好使用类名切换的方式实现循环，需要定义多个颜色类，再通过JS循环切换类名，示例如下：

<style>
.text-red { color: red; }
.text-blue { color: blue; }
.text-green { color: green; }
</style>
<script>
var textClasses = ["text-red", "text-blue", "text-green"];
var classIndex = 0;
function changeTextColor() {
    var element = document.getElementById("questionContainer");
    if (classIndex >= textClasses.length) {
        classIndex = 0;
    }
    element.className = textClasses[classIndex];
    classIndex++;
}
</script>

这种方式适合样式复杂的场景，单纯修改文字颜色的话，直接用style.color会更简洁。

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