Question

我试图通过单击按钮来获取段落类'answer'中的元素，实际上是字体，以更改颜色。我不是要像堆栈交换中的其他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标记之前调用底部的脚本，以便在answer代码运行时完全加载javascript元素。

示例：

    <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（）返回具有所有给定类名的所有子元素的类数组对象。 Learn more on 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元素：

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为您提供节点列表i-e节点数组。并且节点列表上没有任何color属性。

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

或者如果你只对获得一个元素感兴趣。第一个要素更精确，您可以使用document.querySelector

＆＃13;

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

＆＃13;

<!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>

＆＃13;

此外，如果你正在学习这些知识，你应该练习在JS而不是内联处理程序onclick等中添加事件处理程序。这是一种不好的做法。您最好使用addEventListener之类的

＆＃13;

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";
}

＆＃13;

<!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>

＆＃13;

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>

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

6 个答案: