Errors with changing a header's color

Question

I have a webpage I am designing with html, css, and JS. I have them properly hooked up, but for some reason my header will not do what I want. I have tried everything, does anyone know where I went wrong?

I want it so that when I mouse over the header or click the header, the color will change. This does not happen.

The important code in a JS-Fiddle: https://jsfiddle.net/DITTO/c37zxdke/

//javascript
var col = document.getElementById("webTitle").style.color;

function orangeToBlue() {
    col = "#197CFF";
}
function blueToGreen() {
    col = "#19FF29";
}
function greenToPink() {
    col = "#FF19EF";
}
function pinkToOrange() {
    col = "#FF9C19";
}



function changeColor() {
    if (document.getElementById("webTitle").style.color === "#FF9C19") {
        orangeToBlue();
} else if (document.getElementById("webTitle").style.color === "#197CFF") {
        blueToGreen();
    } else if (document.getElementById("webTitle").style.color === "#19FF29") {
        greenToPink();
    } else if(document.getElementById("webTitle").style.color === "#FF19EF") {
        pinkToOrange();
    }
}


//html
<h1 id="webTitle" onmouseover="changeColor()">Webpage Title</h1>


//css
#webTitle:hover {
    cursor: pointer;
}
#webTitle {
    text-shadow: 3.5px 3.5px 0px rgba(0, 0, 0, 0.3);
    font-size: 100px;
    font-family: fantasy;
    color: #FF9C19;
}

score 1 · Answer 1 · edited May 23 '17 at 11:43

1

Did you try to get what document.getElementById("webTitle").style.color output?

When I log this action it's give me a blank string, can you confirm?

If you have the same blank string, then look at this this post the answer looks really good, and has nice links.

Or you can just look at this answer (from a duplicate).

Hope it's gonna help you a bit.

And the answer of Eduardo Escobar is important too.

edited May 23 '17 at 11:43

Community

1
1

answered Jun 21 '15 at 22:46

DFayet

881
1
11
21

I did look at his answer and modified my code. same thing happened. Also, I knew about the blank string. But when I looked up the documentation for style on the JS DOM, it said that the code was right. I'm confused. Ill check the other post. Didn't notice that it existed, thanks for the link. – Inaudible Jive Jun 21 '15 at 23:49
And try with putting the JS before the html, like here http://jsfiddle.net/c37zxdke/8/ – DFayet Jun 21 '15 at 23:51

score 0 · Answer 2 · answered Jun 21 '15 at 22:29

0

Your functions orangeToBlue(), blueToGreen(), greenToPink() and pinkToOrange() aren't making any effect, although they are being called, they're just defining a variable, nothing else.

answered Jun 21 '15 at 22:29

Eduardo Escobar

3,301
2
18
15

The variables were a test to try some other things, this is the updated fiddle with my original code: https://jsfiddle.net/DITTO/c37zxdke/ – Inaudible Jive Jun 21 '15 at 22:48

g1ji · Answer 3 · 2015-06-22T00:50:33.027

0

You should use rgb(rrr,ggg,bbb) color values in javaScript at theplace of using #rrggbb color values and CSS for seting initial color for your text.

//javascript

        document.getElementById("webTitle").style.color = "#197CFF";
        function orangeToBlue() {
            document.getElementById("webTitle").style.color = "#197CFF";
        }

        function blueToGreen() {
            document.getElementById("webTitle").style.color = "#19FF29";
        }

        function greenToPink() {
            document.getElementById("webTitle").style.color = "#FF19EF";
        }

        function pinkToOrange() {
            document.getElementById("webTitle").style.color = "#FF9C19";
        }



        function changeColor() {
            if (document.getElementById("webTitle").style.color === "rgb(255, 156, 25)") {
                orangeToBlue();
            }
            else
            if (document.getElementById("webTitle").style.color === "rgb(25, 124, 255)") {
                blueToGreen();
            }
            else
            if (document.getElementById("webTitle").style.color === "rgb(25, 255, 41)") {
                greenToPink();
            }
            else
            if (document.getElementById("webTitle").style.color === "rgb(255, 25, 239)") {
                pinkToOrange();
            }
        }


//html
<h1 id="webTitle" onclick="changeColor()" style="color: #FF9C19;" >Webpage Title</h1>



//css
 #webTitle:hover {
            cursor: pointer;
        }
        #webTitle {
            text-shadow: 3.5px 3.5px 0px rgba(0, 0, 0, 0.3);
            font-size: 100px;
            font-family: fantasy;
        }

edited Jun 22 '15 at 00:50

answered Jun 22 '15 at 00:32

g1ji

1,099
1
10
21

So, after changing some things, explain to me why THIS doesn't work: https://jsfiddle.net/DITTO/dyjov9sw/ – Inaudible Jive Jun 22 '15 at 00:59
Your logic is correct but you are compareing "document.getElementById("webTitle").style.color" @which gives rgb(rrr,ggg,bbb) color value with #rrggbb – g1ji Jun 22 '15 at 01:19
So what you are saying is that I need to convert the style.color to rgb? Or are you saying I should use hex codes instead on the "rgb(rrr, ggg, bbb)" in the comparison? – Inaudible Jive Jun 22 '15 at 01:20
no i am saying d"ocument.getElementById("webTitle").style.color" returns a color value as a string in the form rgb(rrr,ggg,bbb) – g1ji Jun 22 '15 at 01:24
But I'm comparing that to another rgb(rrr, ggg, bbb) to check if the color matches. They should match up, right? – Inaudible Jive Jun 22 '15 at 01:26
i am saying "document.getElementById("webTitle").style.color" returns color in rbg(rrr,bbb,ggg) so you should compare this value color value in rbg(rrr,bbb,ggg) format instant of color values in #rrggbb formet – g1ji Jun 22 '15 at 01:32
Look at the fiddle please. That's EXACTLY what I did. – Inaudible Jive Jun 22 '15 at 01:38

score 0 · Accepted Answer · answered Jun 22 '15 at 01:40

0

The fiddle I posted most recently under g4u's answer works, fiddle doesn't work. FIDDLE IS BROKEN! Try it in a notepad and run it.

answered Jun 22 '15 at 01:40

Inaudible Jive

139
2
8

Errors with changing a header's color

4 Answers4