Browser Compatibility Problem

[pleek]

Ok, so im making an image creator/generator for my forum. And i started out using firefox to view it in but after a while i change to chrome for speed reasons. So i added like 3 new features and then today i was using firefox and it doesn't work now and I'm not sure why. It works correctly unless the user clicks on "Card Two". In Chrome the image (Card) changes and the options come up. But in firefox and IE nothing happens. Can someone take a look at my source pages and show me how to make it cross browser compatible?

 

Generator.template.php is the smf custom page where the problem is. If i copy the url of the created image from chrome and put it in FF it shows up so i know its part of the template page. The feature i added is the onclick script that changes the src of the image and shows/hides the options div. Im quite sure its a problem with the DOM thats making it not work. Here is that part.

 

<SCRIPT TYPE='text/javascript'>

function Change(options) {

    var newSrc;
    newSrc  = 'http://craigh.tlcrepair.net/ConsoleCard/ConsoleCard';
    newSrc +=  CardChooser.options[CardChooser.selectedIndex].value;
newSrc += '/index.php';
    newSrc += '?UserName=$UserName';
    newSrc += '&Posts=$UserPosts';
    newSrc += '&PS=$PersonalText';
    newSrc += '&Site=$Website';
    newSrc += '&Av=$UserAvatar';
    newSrc += '&Group=$Group';
    newSrc += '&BG=' + BGChooser.options[bGChooser.selectedIndex].value;
    newSrc += '&Font=' + FontChooser.options[FontChooser.selectedIndex].value;
    
    document.getElementById('Card').src = newSrc;
    document.getElementById('Options').style.visibility = options; 
    document.getElementById('Font').style.visibility = options;
}

</SCRIPT>";

[seventheyejosh]

what does the error console say in FF? ctrl+shift+j on widows, command+shift+j on mac, or under the tools menu.

[pleek]

it says "CardChooser is not defined". But clicking on "Card One" should define it. I attached the Generator.template.php file that the error is from.

 

[attachment deleted by admin]

[pleek]

anybody got any ideas?

[pleek]

well i did a little research and by setting variables for the selection menus the script now works in FF. But i still can't get it to work in IE. Heres the new script.

 

<SCRIPT TYPE='text/javascript'>

function Change(options) {

var Card = document.getElementById('CardChooser');
var BG = document.getElementById('BGChooser');
var Font = document.getElementById('FontChooser');
    var newSrc;
    newSrc  = 'http://craigh.tlcrepair.net/ConsoleCard/ConsoleCard';
    newSrc +=  Card.options[Card.selectedIndex].value;
newSrc += '/index.php';
    newSrc += '?UserName=$UserName';
    newSrc += '&Posts=$UserPosts';
    newSrc += '&PS=$PersonalText';
    newSrc += '&Site=$Website';
    newSrc += '&Av=$UserAvatar';
    newSrc += '&Group=$Group';
    newSrc += '&BG=' + BG.options[bG.selectedIndex].value;
    newSrc += '&Font=' + Font.options[Font.selectedIndex].value;
    
    document.getElementById('Card').src = newSrc;
   	document.getElementById('Options').style.visibility = options; 
document.getElementById('Font').style.visibility = options;
}

</SCRIPT>