How to change font-weight of a text using JavaScript

Question

I have a button that looks like this:

HTML:

<button type="button" id="top_skin" onclick="theme()">Theme: <span id="dark">Dark</span>/<span id="light">Light</span></button>

CSS:

#top_skin{display:inline;
float:right;
margin:5px 15px 5px 5px;
padding: 0px 5px 0px 5px;
height:20px;
min-width:140px;
background:grey;
cursor:pointer;
border-radius:5px;
overflow:hidden;
}

#dark{font-weight:bold;}

I want JavaScript to switch the font-weight of the words "Dark" and "Light" so that when I click the button the word "Light" gets bold and "Dark" gets normal. And when I click again I want "Dark" to be bold and "Light" to be normal. But I can't make it work. The funny thing is that I can create a function that do the same thing, but with color in stead of font-weight.

The code that works but changes color instead of font-weight:

function theme(){
var dark = document.getElementById('dark');
var light = document.getElementById('light');

if(light.style.color !== "red"){
    light.style.color="red";
    dark.style.color="black";
}else{
    dark.style.color="red";
    light.style.color="black";
}}

The code that I thought would do the same thing, but with font-weight:

function theme(){
var dark = document.getElementById('dark');
var light = document.getElementById('light');

if(light.style.fontWeight !== "bold"){
    light.style.fontWeight="bold";
    dark.style.fontWeight="normal";
}else{
    dark.style.fontWeight="bold";
    light.style.fontWeight="normal";
}}

Thank you!

Edit:

Now this time when I try it it seems to work just fine for me too. I suppose there have been a typo somewhere. Thank you all for your answers, and I am sorry I took your time!

Answer 1

It works for me on Chrome, Firefox, and IE6-9 (well, I didn't try 8). On Opera, though, fontWeight comes back as 700 rather than bold (which isn't completely unreasonable). So if you're running into trouble on Opera, that may be why.

So you may need to maintain a flag separate from the element's style.fontWeight property. One way is like this:

Live copy | Live copy source

(function() {
  var lightBold = false;

  // Export just the theme function out of the scoping function
  window.theme = theme;

  function theme(){
    var dark = document.getElementById('dark');
    var light = document.getElementById('light');

    lightBold = !lightBold;
    if(lightBold){
        light.style.fontWeight="bold";
        dark.style.fontWeight="normal";
    }else{
        dark.style.fontWeight="bold";
        light.style.fontWeight="normal";
    }
  }

})();

...but of course there are lots of options (a data-* attribute, etc.).

Answer 2

why don't you create 2 classes one with normal font, one with bold font and you assign/remove these depending on which class is assigned to an element? jQuery's hasClass() and addClass() and removeClass() are of great help here