What is wrong with this simple javascript function to swap the CSS class of an HTML body?

Question

I've been staring at this for too long. I've put alerts throughout and the flow is correct. The styles exist. The body starts with the "styleBlack" class. The condition of the if statement is met and the body's class becomes "styleLight". A second call meets the condition of the else statement but the innerHTML of mDiv does not change, nor does the class of the body.

function ColorSwap() {
  var mDiv = document.getElementById("m_divSwap");
  if (mDiv.innerHTML = "Go Light") {
    mDiv.innerHTML = "Go Dark";
    document.body.className = "styleLight";
  } else {
    mDiv.innerHTML = "Go Light";
    document.body.className = "styleBlack";
  }
}

Answer 1

You're assigning instead of comparing

Change

if (mDiv.innerHTML = "Go Light")

to

if (mDiv.innerHTML === "Go Light")

Answer 2

At a first glance, it seems that in your if instead of comparing a string value (with ==)you are assigning (with =).

Answer 3

Hi,

In my opinion you could use JQuery that is a cross browser standard javascript framework, you could download from here (http://docs.jquery.com/Downloading_jQuery).

Also you could put an id attribute to your body like

And the jquery code could be like this:

function ColorSwap() {
  if ($("#m_divSwap").text() == "Go Light") 
  {
    $("#m_divSwap").text("Go Dark");
    $("#mybody").removeClass('styleBlack');
    $("#mybody").addClass('styleLight');

  }
  else 
  {
    $("#m_divSwap").text("Go Light");
    $("#mybody").removeClass('styleLight');
    $("#mybody").addClass('styleBlack ');    
  }
}

Hope it helps. Best Regards. Jose.