javascript color change

Question

0.00/5 (No votes)

See more:

<!DOCTYPE html>
<html>
<body>

<h1>My First JavaScript</h1>

<p id="demo">
JavaScript can change the style of an HTML element.
</p>

<script>
function myFunction()
{
 
x=document.getElementById("demo") 
if (x.style.color="#000000")

 {

  x.style.color="#FF0000";
//alert(x.style.color);
 }
else
 {

  x.style.color="#000000";
//alert(x.style.color);
 }
}
</script>

<button type="button" onclick="myFunction()">Click Me!</button>

</body>
</html>

above code not working second time Click

i tried with many different colors

x.style.color not accepting in else block

else block not working

please help

Posted 4-Mar-14 23:05pm

Omkaara

Updated 4-Mar-14 23:14pm

v2

Add a Solution

3 solutions

Solution 1

This is solved here: http://jsbin.com/qusawaro/3/[^]

[Please accept/up-vote answers or solutions that work for you to encourage participation]

Posted 4-Mar-14 23:31pm

CoderPanda

Solution 2

There are three issues with this code.

1) Your comparison in the if statement, if (x.style.color="#000000"), is not a comparison but an assignment, you're missing one = to make it a comparison. What basically happens is that the color property would get a value assigned, and then the result of that assignment (the value itself) is tested in the if statement, so it's always true.
2) After setting x.style.color to #000000, the color is not #000000 but rather rgb(0, 0, 0) (even the spaces are important here)
3) Initially the color is not set, so x.style.color doesn't return anything. It did turn red, because of the flawed if statement.

So to make the code work, you'll get something like this:

JavaScript

function myFunction()
{
    x=document.getElementById("demo") 
    if (!x.style.color || x.style.color=='rgb(0, 0, 0)')
    {
        x.style.color="#FF0000";
    }
    else
    {
        x.style.color="#000000";
    }
}

Posted 4-Mar-14 23:34pm

Maarten Kools

Updated 4-Mar-14 23:38pm

v2

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Omkaara · Accepted Answer · 2014-03-04T23:37:00

Different browsers return different values for the same colors. You better use different logic to toggle the colors. What I suggest, using pure JavaScript, is this:

var demoColors = ["#000000", "#FF0000"];
var demoFlag = true;
function myFunction()
{
var demo = document.getElementById("demo");
demo.style.color = demoColors[+demoFlag]
demoFlag = !demoFlag;
}