Change font color via button click

Question

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>

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, May 16 '18 at 12:12
Possible duplicate of [How to use getElementsByClassName in javascript-function?](https://stackoverflow.com/questions/14142677/how-to-use-getelementsbyclassname-in-javascript-function) — Mamun, May 16 '18 at 12:12

score 2 · Accepted Answer · answered May 16 '18 at 12:28

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';

the additional information of placing the script at the bottom of the body is basic to most of the respondents, but not to me. @CodeAlb saw this in the answer I gave and responded - he read the question. — capser, May 16 '18 at 16:50

score 1 · Answer 2 · answered May 16 '18 at 12:16

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

score 1 · Answer 3 · answered May 16 '18 at 12:17

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

OR

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

score 1 · Answer 4 · answered May 16 '18 at 12:19

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

score 0 · Answer 5 · answered May 16 '18 at 12:16

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>

score 0 · Answer 6 · answered May 16 '18 at 12:18

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>

Works on firefox and chrome but not in windows explorer – capser May 16 '18 at 12:25 — capser, May 16 '18 at 12:25

Change font color via button click

6 Answers6