admin管理员组文章数量:1430114
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>
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>
-
1
In both functions,
xis not a single element. That means you can't change the style like this. You need to iterate onxor use anidinstead of aclassand usegetElementByIdto 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
6 Answers
Reset to default 2First 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";
}
OR
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>
本文标签： javascriptChange font color via button clickStack Overflow
版权声明：本文标题：javascript - Change font color via button click - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745535505a2662253.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论