Javascript change font color onclick

Question

So I'm trying to change the font color of my entire page when I click on a radio button, like so:

<input type="radio" name="textcol" value="#FOF8FF" onclick = "changeText('#FOF8FF');"> Alice Blue<br>

Which then calls this function:

function changeText(col) 
    {
        console.log(col);
        console.log(document.getElementsByName('boyo'));
        var abc = document.getElementsByName('boyo');
        for(var i = 0, length = abc.length; i < length; i++)
        {
            abc[i].style.color = col;
        }

}

And just so you're aware, within all my h3 and p tags (the only text within my document), I give them a name "boyo", like this:

<h3 name = "boyo">My favorite food</h3>

But for some reason, it does nothing. I know it has the proper elements (I print them out to console as you can see), and no errors occur, but my font color doesn't change. What the hell am I doing wrong?

EDIT: When I compare the value of just the string "#80FF08" to the value I pass (which when printed out is also the exact same), it returns FALSE that they're equal - how could this be? When I manually set the color it works.

Answer 1

Your code would work fine if you change the O to 0 in your color Code #FOF8FF

 function changeText(col) { console.log(col); console.log(document.getElementsByName('boyo')); var abc = document.getElementsByName('boyo'); for (var i = 0, length = abc.length; i < length; i++) { abc[i].style.color = col; } } 

 <input type="radio" name="textcol" value="#FOF8FF" onclick='changeText("#F0F8FF")'>Alice Blue <br> <h3 id="colorMe" name="boyo">My favorite food</h3> 

Answer 2

Change the color to other color working correct, seems like #FOF8FF is not a valid HEX value :

 function changeText(color) { console.log(color); console.log(document.getElementsByName('boyo')); var abc = document.getElementsByName('boyo'); for (var i = 0, length = abc.length; i < length; i++) { abc[i].style.color = color; } } 

 <input type="radio" name="textcol" value="#FOF8FF" onclick="changeText('#33ccff');">Alice Blue <br> <h3 name="boyo">My favorite food</h3> 

Answer 3

Its because #FOF8FF does not exist, try using #000 or any other color in place of #FOF8FF.

If you want to be clear more about it and inspect your element and try to give color: #FOF8FF, It want work either. For your reference I am attaching screen shot of this.

Answer 4

#FOF8FF doesn't exists change to O to 0 and i added different color code and it's working fine

 function changeText(col) { console.log(col); console.log(document.getElementsByName('boyo')[0]); var abc = document.getElementsByName('boyo')[0].style.color = col; } 

 <h3 name = "boyo">My favorite food</h3> <input type="radio" name="textcol" value="#d2d2d2" onclick = "changeText('#d2d2d2');"> Alice Blue<br>