If Else statement in Javascript

Question

I have created a switch in my website. It works like a light switch. When people click on it, the background color and the color of some text paragraph will switch to different colors. I wrote the code below and successfully did the task:

  $(".clickme").click(function () {      
     $('html').css('background-color', 'black');
     $('#top_nav a').css('color', '#ff7b00');
     $('.back_face').css('background-color', 'black');
     return false;
  });

But now I want to turn the light back on. I have created a var called lighton, and set it to 0. And I tried to use an if else statement to do the task, but it doesn't work. Below is the code I wrote and failed:

<a href="" class="clickme">Click me</a>

<script>    
  $(".clickme").click(function () {    
  var lightoff = 0;   
  if (lightoff=0){    
      $('html').css('background-color', 'black');
      $('#top_nav a').css('color', '#ff7b00');
      $('.back_face').css('background-color', 'black');
      lightoff = 1;
      return false;    
 }else{

      $('html').css('background-color', 'white');
      $('#top_nav a').css('color', 'black');
      $('.back_face').css('background-color', 'white');
      lightoff = 0;
      return false;
   }
});

</script>

I just started learning JavaScript recently, and I have checked the JavaScript Conditional Statements syntax. So I hope somebody knows what's wrong with my code. Thank you so much.

put var lightoff = 0; out of your click() event

zzlalani
– zzlalani

2013-08-02 06:00:06 +00:00
Commented Aug 2, 2013 at 6:00 — zzlalani
– zzlalani, Commented Aug 2, 2013 at 6:00

asifrc · Accepted Answer · 2013-08-02 06:19:03Z

5

You need to use if (lightoff==0){.

= is an assignment operator whereas == is a comparison operator.

When using an assignment operator within a condition, the assigned value will be evaluated, so (lightoff=0) will always evaluate to 0 which is then casted into false. The most common case for using an assignment operator within an conditional is when the return value of a function is being assigned, e.g. ( lightoff = checkIfLightIsOff() )

edited Aug 2, 2013 at 6:19

answered Aug 2, 2013 at 6:00

asifrc

5,8412 gold badges20 silver badges22 bronze badges

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

4 Comments

Phix Over a year ago

Good point Sekharan. Javascript is funky with all the truthy and falsy 'values'. Originally I was going to say for simple examples it's safe for the double equals, but considering the nature of JS I'd start using the equality operator from the get go. Also asifrc, jQuery is a good way to learn the basics, but you'll need to know what's going on under the hood at some point. Start now!

asifrc Over a year ago

@Phix I had used pure javascript for over 5 years before ever hearing of jquery. I'm not offended or anything lol, but just curious: is there anything I wrote that prompted you to recommend that I learn more about javascript (or that I lean too heavily on jQuery)?

Phix Over a year ago

My bad, it was directed at the OP. Didn't scroll up high enough on my phone. My mistake!

asifrc Over a year ago

That's kind of what I thought lol. But I do absolutely agree: @Hold_My_Anger, given the luxury of time, you should most definitely "rough it" and use pure javascript for a bit before jumping into jQuery. That'll help you clientside scripting in general, and is also helpful when you try out something like Node.js

Arun P Johny · Accepted Answer · 2013-08-02 05:59:20Z

3

Since you want to use the value of lightoff across multiple calls to the callback method, it should be defined out the scope of the handler method, so that multiple calls to the method will share the same instance of lightoff

Also as @zzlalani pointed out the = operator stands for assignment, what you need is the comparator operator which is ==

it should be

var lightoff = 0;

$(".clickme").click(function () {

    if (lightoff==0){

        $('html').css('background-color', 'black');
        $('#top_nav a').css('color', '#ff7b00');
        $('.back_face').css('background-color', 'black');
        lightoff = 1;
        return false;

    }else{

        $('html').css('background-color', 'white');
        $('#top_nav a').css('color', 'black');
        $('.back_face').css('background-color', 'white');
        lightoff = 0;
        return false;
    }
});

answered Aug 2, 2013 at 5:59

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

1 Comment

zzlalani Over a year ago

the condition should be if (lightoff==0){ ratherthan of if (lightoff=0){ you need to use == two equaltos

JSutton · Accepted Answer · 2013-08-02 06:00:36Z

1

I'm not a Javascript expert, but it looks like you used '=' instead of "==", which would set the variable to 0 instead of comparing it.

answered Aug 2, 2013 at 6:00

JSutton

715 bronze badges

Comments

Zaheer Ahmed · Accepted Answer · 2013-08-02 06:16:13Z

0

instead of = you should used == or ===:

= is assignment operator
== equal to ie,
x==8 false
x==5 true
=== exactly equal to (equal value and equal type) ie,
x==="5" false
x===5 true

some other cases:

'' == '0'           // false
0 == ''             // true
0 == '0'            // true

false == 'false'    // false
false == '0'        // true

false == undefined  // false
false == null       // false
null == undefined   // true

answered Aug 2, 2013 at 6:16

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Comments

neuront · Accepted Answer · 2013-08-02 06:16:20Z

0

An alternative approach is the toggle event

$(".clickme").toggle(function () {    
    $('html').css('background-color', 'black');
    $('#top_nav a').css('color', '#ff7b00');
    $('.back_face').css('background-color', 'black');
    return false;    
}, function() {
    $('html').css('background-color', 'white');
    $('#top_nav a').css('color', 'black');
    $('.back_face').css('background-color', 'white');
    return false;
});

answered Aug 2, 2013 at 6:16

neuront

9,6526 gold badges46 silver badges74 bronze badges

Collectives™ on Stack Overflow

If Else statement in Javascript

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

4 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related