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>

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>

• javascript
• html
• css
• textarea
• textcolor

6 Answers 6

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>

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

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

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

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

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

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>