我想在我的简单 html 页面上保持简单。 1 个按钮循环背景颜色，1 个按钮循环文本颜色。
我在 stackoverflow 上找到了一些适用于背景的代码：
<script>
var colors = ["red", "blue", "green"];
var colorIndex = 0;
function changeColor() {
var col = document.getElementById("body");
if( colorIndex >= colors.length ) {
colorIndex = 0;
}
col.style.backgroundColor = colors[colorIndex];
colorIndex++;
}
</script>
<body id='body'>
<button onclick="changeColor();">Change color</button>
</body>
然后我发现了一些其他类似的代码，可以与其他代码一起使用，用于文本颜色，但它不起作用：
<script>
function changeColor(){
var element = document.getElementById("questionContainer");
element.className = "myClass";
}
.myClass{
color:red;
}
</script>
<div id="questionContainer">
<p><strong><em> QUESTION: WHAT IS YOUR NAME?</em></strong></p>
</div>
<button onclick="changeColor()">COLORCHANGER<button>
我无法让它工作。拔掉我的头发。
我在纯 .html 中单独尝试了任一代码块进行测试。用于背景的有效，用于文本的无效。
您已在块内添加了 CSS 类。 block 仅适用于 javascript 代码。我已经编辑了你的第二段代码如下
<script>
function changeColor(){
var element = document.getElementById("questionContainer");
element.className = "myClass";
}
</script>
<style>
.myClass{
color:red;
}
</style>
<div id="questionContainer">
<p><strong><em> QUESTION: WHAT IS YOUR NAME?
</em></strong></p>
</div>
<button onclick="changeColor()">COLORCHANGER<button>