Trying to change the color of text on click in javascript

Question

So I am trying to make something where whenever I click on the text it change's color.

Javascript:

function changecolor(){
    var tc = document.getElementById("header").style.color.value;
    if  (tc = "#000000") { tc = "#0009FF"}
    else if (tc == "#0009FF") { tc = "#FF0000"}
    else if (tc == "#FF0000") { tc = "#15FF00"}
    else if (tc == "#15FF00") { tc = "#FFA600"}
    else {tc = "#000000"};
    document.getElementById("header").style.color.value = tc;
}

html:

<div onclick="changecolor()"><h1 id="header" style="color:#000000;"> Nick's Basic Physic's Calculator </h1></div>

It is not working and I have not been able to figure out why. When I click on the text nothing happens.

Not sure, but I think that problem in your html onclick="changecolor()" because I think that on click will be executed result of changecolor function, try to change it to onclick="changecolor" — Epsil0neR
– Epsil0neR, Commented Oct 13, 2013 at 22:35

Slava · Accepted Answer · 2013-10-13 22:43:34Z

1

Change

document.getElementById("header").style.color.value = tc;

to

document.getElementById("header").style.color = tc;

Working example:

http://jsfiddle.net/xEyLf/

answered Oct 13, 2013 at 22:43

Slava

3,1574 gold badges36 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

X-Pippes · Accepted Answer · 2013-10-13 22:45:34Z

1

your problem is in var tc = document.getElementById("header").style.color.value;

you have to change to tc = document.getElementById("header").style.color;in order to get the color into variable.

answered Oct 13, 2013 at 22:45

X-Pippes

1,1707 silver badges25 bronze badges

Comments

ncf · Accepted Answer · 2013-10-13 22:56:27Z

0

I have another solution... here's a jsfiddle: http://jsfiddle.net/9zfJA/

Keep in mind I'm using these jQuery methods (as well as the jQuery library itself), by simply switching between CSS classes:

hasClass(): to check if the class is present

addClass(): to add the correct class based on the condition above

removeClass(): remove all classes, I've basically built a "reset" function

I think there are errors in the way it functions and how you want it, but I've built it on the same logic you have in your question.

answered Oct 13, 2013 at 22:56

ncf

5564 silver badges16 bronze badges

Collectives™ on Stack Overflow

Trying to change the color of text on click in javascript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related