CODEWITHSUNDEEP
javascripthtmlcsstextareatextcolor
Anton Koenig
Anton Koenig

Reputation: 39

Change color of textarea with Javascript

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

Answers (6)

Lair Jr
Lair Jr

Reputation: 64

I think you are trying to change the background color, don't you?

Try to change the style.colorto style.background:

function black() {
    document.getElementById("text").style.background = "black";
}
function white() {
    document.getElementById("text").style.background = "white";
}

Upvotes: 1

Brett Clapper
Brett Clapper

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

se0kjun
se0kjun

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

Felix
Felix

Reputation: 80

<script>
    function black() {
        document.getElementById("text").style.color="#000000";
    }

    function white() {
        document.getElementById("text").style.color="#ffffff";
    }
</script>

Upvotes: 0

Paul Fitzgerald
Paul Fitzgerald

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

Jakob
Jakob

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

Related Questions