CODEWITHSUNDEEP
javascripthtmlcolors
remorath
remorath

Reputation: 823

Trying to change the color of text on click in javascript

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.

Upvotes: 0

Views: 98

Answers (3)

ncf
ncf

Reputation: 556

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.

Upvotes: 0

X-Pippes
X-Pippes

Reputation: 1170

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.

Upvotes: 1

Slava
Slava

Reputation: 3107

Change

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

to

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

Working example:

http://jsfiddle.net/xEyLf/

Upvotes: 1

Related Questions