document.getElementById("…").className = "…"; Not working in IE

Question

I created a business generator here: http://minespress.net/web_apps/business-cards/

I created a preview pane using document.getElementById("…").className = "…"; which switches the background image onClick (of the thumbnail) and also moves around the text divs depending on the design of the business card. This works flawlessly in FF, Chrome and Safari. When I tried it in IE nothing happened onClick.

I should also mention that my thumbs are radio buttons that need to change the form action based whether or not they are checked. Once again works fine in other browsers besides IE. Is there some IE bug or am I just doing something completely wrong?

Here is an example of my code:

<input
    style="display:none"
    checked="checked"
    name="group1"
    id="2"
    value='http://minespress.net/web_apps/business-cards/img/twinkle-blue.jpg'
    type="radio"
    onclick="document.getElementById('card').className ='Default'; document.getElementById('compname').className ='', document.getElementById('slogan').className ='', document.getElementById('leftinfo').className ='', document.getElementById('rightinfo').className =''" />

Solution 1

IE 8 does not support images as labels for input fields. This is why my radio buttons do not work. Now I just need to figure out how to work around this.

Solution 2

Did you try changing the ,s to ;s? IE might be pickier than the other browsers...

Change

"document.getElementById('card').className ='Default'; document.getElementById('compname').className ='', document.getElementById('slogan').className ='', document.getElementById('leftinfo').className ='', document.getElementById('rightinfo').className =''"

to

"document.getElementById('card').className ='Default'; document.getElementById('compname').className =''; document.getElementById('slogan').className =''; document.getElementById('leftinfo').className =''; document.getElementById('rightinfo').className =''"

and see if that solves your problem.

Solution 3

Use setAttribute instead:

var ele = document.getElementById('card')
ele.setAttribute('class', 'Default');