通过单击按钮更改字体颜色

Question

我试图通过单击按钮来获取段落类“答案”中的元素（实际上是字体）以更改颜色。 我不是想像其他Javascript问题一样在堆栈交换中尝试更改背景颜色，而是更改元素的字符，字体颜色。 另外，我需要一遍又一遍地使用它，所以我宁愿使用类函数而不是id。 我希望hideFunction的字符字体颜色为白色，这将与背景匹配并“隐藏”字母。 在showFunction中，我希望段落颜色为黑色，在白色背景下将大胆显示字符。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Book Title</title>
<script>
function showFunction() {
    var x = document.getElementsByClassName("answer");
    x.style.color = "black";
}
function hideFunction() {
    var x = document.getElementsByClassName("answer");
    x.style.color = "white";
}
</script>
<style> 
</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>  

Answer 1

第一个错误 ：

您的脚本在加载完整文档之前正在运行。 在关闭body标签之前，请在底部调用脚本，以便在运行javascript代码时可以完全加载您的answer元素。

例：

    <script>
       // Your amazing script goes here...
    </script>
</body>
</html> 

第二个错误 ：

document.getElementsByClassName给出包含给定类的每个元素的数组。 您需要一个元素在其上注入样式，而不是数组。

您可以这样调用数组中的第一个元素：

// get first [0] from array.
var answerElement = document.getElementsByClassName('answer')[0]; 
answerElement.style.color = 'red';

Answer 2

getElementsByClassName（）返回具有所有给定类名称的所有子元素的类似数组的对象。 进一步了解MDN

因此您的代码应如下所示：

function showFunction() {
    var x = document.getElementsByClassName("answer")[0];
    x.style.color = "black";
}

function hideFunction() {
    var x = document.getElementsByClassName("answer")[0];
    x.style.color = "white";
}

这是工作jsFiddle的链接

Answer 3

由于document.getElementsByClassName用于数组，因此应使用

document.getElementsByClassName("answer")[0]; 或使用id - document.getElementById("yourIDname");

function showFunction() {
var x = document.getElementsByClassName("answer")[0];
x.style.color = "black";
}
function hideFunction() {
var x = document.getElementsByClassName("answer")[0];
x.style.color = "white";
}

要么

function showFunction() {
var x = document.getElementById("yourIDname");
x.style.color = "black";
}
function hideFunction() {
var x = document.getElementById("yourIDname");
x.style.color = "white";
}

Answer 4

试试这个，它将对单个.answer元素.answer ：

function showFunction() {
    var x = document.getElementsByClassName("answer");
    for(var i = 0; i < x.length; i++){
        x[i].style.color = "black";
    }
}
function hideFunction() {
    var x = document.getElementsByClassName("answer");
    for(var i = 0; i < x.length; i++){
        x[i].style.color = "white";
    }
}

Answer 5

document.getElementsByClassName为您提供节点列表，即节点数组。 节点列表上没有任何color属性。

您可能要遍历列表，获取每个元素并为其添加处理程序。

或者，如果您仅对获取一个元素感兴趣。 更精确的第一个元素，可以使用document.querySelector

 function showFunction() { var x = document.querySelector(".answer"); x.style.color = "black"; } function hideFunction() { var x = document.querySelector(".answer"); x.style.color = "red"; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Book Title</title> </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> 

此外，如果您正在学习Thin，则应该练习在JS添加事件处理程序，而不是内联处理程序onclick等。这是一个不好的做法。 您最好像这样使用addEventListener

 document.getElementById("btn1").addEventListener("click", showFunction); document.getElementById("btn2").addEventListener("click", hideFunction); function showFunction() { var x = document.querySelector(".answer"); x.style.color = "black"; } function hideFunction() { var x = document.querySelector(".answer"); x.style.color = "white"; } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Book Title</title> </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 id="btn1" >Show Answer</button> <button id="btn2" >Hide Answer</button> </div> </body> </html> 

Answer 6

这样尝试

 <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>Book Title</title>
    <script>
    function showFunction() {
        var x = document.getElementsByClassName("answer")[0].style.color = 'black'
    }
    function hideFunction() {
        var x = document.getElementsByClassName("answer")[0].style.color = 'white'
    }
    </script>
    <style> 
    </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>