Reputation: 39
I have a simple script which is not changing the text color of the textarea. Please see the code below:
<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
function black() {
document.getElementById("text").style.color="#000000";
}
function white() {
document.getElementById("text").style.color="#ffffff";
}
</script>
Upvotes: 3
Views: 9308
Reputation: 64
I think you are trying to change the background color, don't you?
Try to change the style.color
to style.background
:
function black() {
document.getElementById("text").style.background = "black";
}
function white() {
document.getElementById("text").style.background = "white";
}
Upvotes: 1
Reputation: 11
So for the record, if I paste exactly the code I see in your question into a file and save it as test.html or something, then open it in a browser it does work. The code I'm seeing at the moment being:
<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
function black() {
document.getElementById("text").style.color="#000000";
}
function white() {
document.getElementById("text").style.color="#ffffff";
}
</script>
So I imagine that in your real code these function declarations are actually within a closure. In which case the functions would be undefined at the scope which the event handlers would be calling them. For example the following would throw undefined errors in the console when clicking the radio buttons because white
and black
are out of scope.
<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
(function() {
function black() {
document.getElementById("text").style.color="#000000";
}
function white() {
document.getElementById("text").style.color="#ffffff";
}
})()
</script>
You can ensure that the functions are available for use in the handlers by declaring a global variable on window
and assigning the value to the appropriate function. For example:
<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
(function() {
window.black = function() {
document.getElementById("text").style.color="#000000";
}
window.white = function() {
document.getElementById("text").style.color="#ffffff";
}
})()
</script>
This would be the explicit way of ensuring your functions are available at the global scope, but you could also simply remove the window.
from in front of the variable names.
Also, understand that if you were to declare these variables like var black = function() { ...
from within the closure then you would be right back where you started with the functions being out of scope for the click handlers.
And lastly, this is all generally very ugly. Assigning variables at the global window
level is usually a bad idea, especially with such generic names as white
and black
. They could easily conflict with another variable in your code. The following would be a better way of doing something like this IMO.
<input type="Radio" name="text" id="black-radio">B<br/>
<input type="Radio" name="text" id="white-radio">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
(function() {
var black = function() {
document.getElementById("text").style.color="#000000";
}
var white = function() {
document.getElementById("text").style.color="#ffffff";
}
document.getElementById('black-radio').addEventListener('click', black);
document.getElementById('white-radio').addEventListener('click', white);
})()
</script>
Upvotes: 0
Reputation: 550
Use better addEventListener
document.getElementById('black').addEventListener("click", black);
document.getElementById('white').addEventListener("click", white);
In HTML,
<input type="radio" name="text" id="black">B<br/>
<input type="radio" name="text" id="white">W
Here's a fiddle
Upvotes: 1
Reputation: 80
<script>
function black() {
document.getElementById("text").style.color="#000000";
}
function white() {
document.getElementById("text").style.color="#ffffff";
}
</script>
Upvotes: 0
Reputation: 12129
You need to put your javascript within script
tags.
See below for working demo.
<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
function black() {
document.getElementById("text").style.color="#000000";
}
function white() {
document.getElementById("text").style.color="#ffffff";
}
</script>
To avoid putting javascript within script
tags you can add you javascript to a .js
file and reference this in the html like this <script src="example.js"></script>
Upvotes: 1
Reputation: 3546
You forgot opening { for white function
Do it like this
function black() {
document.getElementById("text").style.color="#000000";
}
function white() {
document.getElementById("text").style.color="#ffffff";
}
Upvotes: 0