javascript - Change font color via button click

I am trying to get the elements in the paragraph class 'answer', the font actually, to change colors by clicking a button. I am not trying to change the background color as in other Javascript questions on stack exchange, but the characters of the element, The font color. Also, I need to use this over and over again, so I would rather use the class functions as opposed to the id. I want the font color of the characters to white for the hideFunction, which will match the background and 'hide' the letters. In the showFunction, I want the paragraph color to be black, which against a white background will boldly show the characters.

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

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

Share Improve this question edited May 16, 2018 at 12:17 asked May 16, 2018 at 12:10 capser 2,6556 gold badges47 silver badges80 bronze badges

1 In both functions, x is not a single element. That means you can't change the style like this. You need to iterate on x or use an id instead of a class and use getElementById to fetch it. – Federico klez Culloca Commented May 16, 2018 at 12:12
Possible duplicate of How to use getElementsByClassName in javascript-function? – Mamun Commented May 16, 2018 at 12:12
why not do via css then remove/add hidden class on click? – treyBake Commented May 16, 2018 at 12:14

Add a ment |

6 Answers 6

Sorted by: Reset to default 2

First mistake:

Your script is running before the full Document was loaded. Call your script at the bottom before closing body tag, so your answer element is fully loaded when javascript code runs.

Example:

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

Second mistake:

The document.getElementsByClassName gives an array of every element that contains the given class. You need one element to inject styles on it and not an array.

You can do it by calling the first element from array like this:

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

getElementsByClassName() Returns an array-like object of all child elements which have all of the given class names. Learn more on MDN

So your code should look like this,

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

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

Here is the link to working jsFiddle

Since document.getElementsByClassName is for arrays, you should use

document.getElementsByClassName("answer")[0]; OR use 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";
}

Try this, it will work single to multiple .answer element:

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

document.getElementsByClassName gives you the node list i-e array of nodes. And there is not any color property on list of nodes.

You may want to iterate through the list, getting each element and adding handlers for them.

Or if you are only interested in getting the one element. First element to be more precise, you can use 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>

Moreover, If you're learning thins, you should practice adding event handlers in JS rather than inline handler onclick etc. It's a bad practice. You better use addEventListener like

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>

Try like this

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Change font color via button click - Stack Overflow

6 Answers 6

与本文相关的文章

评论列表(0)