Here's my code:

  if (document.getElementById("hiddenButton").style.visibility != "visible") {
     document.getElementById("hiddenButton").style.visibility = "visible";
  }
  else {
     document.getElementById("hiddenButton").style.visibility = "hidden";

  }

This code shows and hide a HTML button when you click on another button.

But my question is why does that code work and this doesn't:

  if (document.getElementById("hiddenButton").style.visibility = "hidden") {
     document.getElementById("hiddenButton").style.visibility = "visible";
  }
  else {
     document.getElementById("hiddenButton").style.visibility = "hidden";

  }

Here's my code:

  if (document.getElementById("hiddenButton").style.visibility != "visible") {
     document.getElementById("hiddenButton").style.visibility = "visible";
  }
  else {
     document.getElementById("hiddenButton").style.visibility = "hidden";

  }

This code shows and hide a HTML button when you click on another button.

But my question is why does that code work and this doesn't:

  if (document.getElementById("hiddenButton").style.visibility = "hidden") {
     document.getElementById("hiddenButton").style.visibility = "visible";
  }
  else {
     document.getElementById("hiddenButton").style.visibility = "hidden";

  }

• javascript

• because comparism is done with == and not only with one = – Najzero Commented Feb 28, 2013 at 15:36
• == <-- That is the equality operator in javascript – Pow-Ian Commented Feb 28, 2013 at 15:36
• Because = is an assignment not a comparison, you probably want == (or ===, I'm not a javascript programmer so not entirely sure which but it's one of those) – jcoder Commented Feb 28, 2013 at 15:36
• @jbabey: Not really; OP is using assignment, not wondering why ('false'===false) == false. – Brad Christie Commented Feb 28, 2013 at 15:46
• This is why we don't use the word equals when we talk about assigning a variable. When we assign a value to a variable or object, we should be using the terminology gets. So if I were to say var myVar = 'this' out loud it would sound like "var myVar gets this" ... And if I were testing a condition I would use the terminology "if myVar is equal to this" -- Learning to separate the two colloquially helps in remembering what those differences are. – Zak Commented Feb 28, 2013 at 15:50

6 Answers 6

Your condition is actually an assignment:

if (document.getElementById("hiddenButton").style.visibility = "hidden") {

You should be using ==:

if (document.getElementById("hiddenButton").style.visibility == "hidden") {

The = is an assignment operation.

The != is an inequality operator.

The == is an equality operator.

I guess what you need is the == operator. So replace your code with:

if (document.getElementById("hiddenButton").style.visibility == "hidden") {

JS Comparison operators

==      is equal to 
===     is exactly equal to (value and type)
!=      is not equal

For example:

var x = 1;  //define and assigned and now x equal to 1
x = 3;        //now x equal to 3

if( x == 4) {
    //you won't see this alert
    alert('Hello, x is 4 now');
} else {
    //you will see this alert
    alert('Hello, x hasn not been changed and it is still ' + x.toString());
}

I think your problem is that you are confusing the assignment operator ( = ) with the equality operator ( == or ===). the assignment operator set the left hand side equal to whatever is on the right hand side, and the equality operator ( == or === ) actually tests for equality.

It's because simple "=" is not for comparaison. Use "==" instead.

Left = Right

This means, "Whatever the right side is, put it as the value for the left side."

All comparisons and other checks are done with two symbols to limit ambiguity and improper variable assignments when you simply meant to check a value.

!= means not equal to
== means equal
=== means equal and same object/datatype
= means "Assign the right side (Or what it evaluates to) to the variable on the left