Problema document.getElementById con Firefox!

**xwilly84** · 14-12-2010, 13:46

Salve a tutti......ho un problema di compatibilità credo....qui sotto inserisco il codice html
per html in linea rimando a http://www.willy84.altervista.org/

codice:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<html>
<head>
<title>Gallery Dynamic 1.0 (Beta)</title>
<style>
@import url("css/style_gallery.css");
@import url("css/style_scroll-vertical.css");
</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="js/effect.js"></script>
<script type="text/javascript" src="js/scroll.js"></script>
<script type="text/javascript" src="js/modify.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
</head>

<body id="bg" onload="image1()">

<div id="container">

<p class="titolo">GALLERY DYNAMIC <span class="versione">1.0</span><span class="beta"> (Beta)</span></p>

[img]button/help.png[/img] 

[img]button/button_down.png[/img] 
[img]button/button_left.png[/img]
[img]button/button_right.png[/img] 


<div id="gallery">
[img]full/image1full.jpg[/img]
</div>

 
<div id="lateraleleft">
[img]button/button_down.png[/img] 
[img]button/button_up.png[/img] 

 
<div id="box1">
<div id="image1">
[img]small/image1small.jpg[/img] 
</div>
<div id="image2">
[img]small/image2small.jpg[/img] 
</div>
<div id="image3">
[img]small/image3small.jpg[/img] 
</div>
<div id="image4">
[img]small/image4small.jpg[/img] 
</div>
<div id="image5">
[img]small/image5small.jpg[/img] 
</div>
</div>
 
<div id="box2">
<div id="image6">
[img]small/image6small.jpg[/img] 
</div>
<div id="image7">
[img]small/image7small.jpg[/img] 
</div>
<div id="image8">
[img]small/image8small.jpg[/img] 
</div>
<div id="image9">
[img]small/image9small.jpg[/img] 
</div>
<div id="image10">
[img]small/image10small.jpg[/img] 
</div>
</div>
</div>


<div id="lateraleright">
<label class="modify_panel">Modify Panel</label>



<label class="background_color">Background Color</label>


<select name="background_color" id="bgchange" onchange="bg_color()">
<option value="0">Silver</option>
<option value="1">White</option>
<option value="2">LightGreen</option>
<option value="3">LightYellow</option>
</select>


<label class="skin_color">Panel Color</label>


<label class="left_panel">Left Panel:</label>


<select name="left_color" id="leftchange" onchange="left_color()">
<option value="0">Gray</option>
<option value="1">White</option>
<option value="2">Silver</option>
<option value="3">Green</option>
</select>

<label class="middle_panel">Middle Panel:</label>


<select name="middle_color" id="middlechange" onchange="middle_color()">
<option value="0">Gray</option>
<option value="1">White</option>
<option value="2">Silver</option>
<option value="3">Green</option>
</select>

<label class="bottom_panel">Bottom Panel:</label>


<select name="bottom_color" id="bottomchange" onchange="bottom_color()">
<option value="0">Gray</option>
<option value="1">White</option>
<option value="2">Silver</option>
<option value="3">Green</option>
</select>



<label class="font">Font</label>


<label class="type_font">Type Font:</label>


<select name="type_font" id="fonttype" onchange="font()">
<option value="0">Corbel</option>
<option value="1">Arial</option>
<option value="2">Verdana</option>
<option value="3">Comic Sans MS</option>
</select>

<label class="size_font">Size Font:</label>


<select name="size_font" id="fontsize" onchange="size_font()">
<option value="0">14px</option>
<option value="1">16px</option>
<option value="2">18px</option>
<option value="3">20px</option>
</select>

<label class="color_font">Color Font:</label>


<select name="color_font" id="fontcolor" onchange="color_font()">
<option value="0">Black</option>
<option value="1">Orange</option>
<option value="2">Blue</option>
</select>

</div>

<div id="comment">

</div>

</div>

<div id="footer">

<p class="risoluzione">Risoluzione raccomandata 1920 x 1080 HD</p>
<p class="copyright">&#169 Gallery Dynamic 1.0 (Beta)


Contact me
</div>

</body>
</html>

questo è il contenuto di modify.js....con chrome e Ie tutto ok ma su firefox non funziona....

codice:

/*Controllo Background Color */
function bg_color() {
if (bgchange.value=="0")
document.getElementById("bg").style.backgroundColor="silver";
else if (bgchange.value=="1")
document.getElementById("bg").style.backgroundColor="white";
else if (bgchange.value=="2")
document.getElementById("bg").style.backgroundColor="lightgreen";
else if (bgchange.value=="3")
document.getElementById("bg").style.backgroundColor="lightyellow";
}

grazie in anticipo!

**bstefano79** · 14-12-2010, 13:50

prova a cambiare il doppio apice in singolo apice

codice:

/*Controllo Background Color */
function bg_color() {
if (bgchange.value=='0')
document.getElementById('bg').style.backgroundColor='silver';
else if (bgchange.value=='1')
document.getElementById('bg').style.backgroundColor='white';
else if (bgchange.value=='2')
document.getElementById('bg').style.backgroundColor='lightgreen';
else if (bgchange.value=='3')
document.getElementById('bg').style.backgroundColor='lightyellow';
}

**xwilly84** · 14-12-2010, 14:17

grazie per la risposta immediata, ma non va....ci sto sbattendo la testa non capisco il problema.......

**cavicchiandrea** · 14-12-2010, 14:34

Potrebbe essere perché ti riferisci direttamente al id bgchange ma la sitassi corretta document.getElementById('bgchange')....

**xwilly84** · 14-12-2010, 15:07

codice:

<select name="background_color" id="bgchange" onchange="bg_color()"> 
<option value="0">Silver</option> 
<option value="1">White</option> 
<option value="2">LightGreen</option> 
<option value="3">LightYellow</option> 
</select>

io faccio si che ad ogni opzione selezionata possa scattare un'azione, in questo caso cambio del colore di sfondo per il body che ha come id="bg"

richiamo tutto qui.

codice:

function bg_color() {
if (bgchange.value=='0')
document.getElementById('bg').style.backgroundColor='silver';
else if (bgchange.value=='1')
document.getElementById('bg').style.backgroundColor='white';
else if (bgchange.value=='2')
document.getElementById('bg').style.backgroundColor='lightgreen';
else if (bgchange.value=='3')
document.getElementById('bg').style.backgroundColor='lightyellow';
}

ripeto in Ie e Chrome funziona tutto....tranne in firefox!

**Vindav** · 14-12-2010, 15:32

Non credo sia un problema della funzione getElementById perche firefox la supporta tranquillamente... che versione di firefox usi?

**xwilly84** · 14-12-2010, 15:38

uso Firefox Setup 3.6.13

**Vindav** · 14-12-2010, 16:08

[CODE]function bg_color() {
if (bgchange.value=='0')
document.getElementById('bg').style.backgroundColo r='silver';
else if (bgchange.value=='1')
document.getElementById('bg').style.backgroundColo r='white';
else if (bgchange.value=='2')
document.getElementById('bg').style.backgroundColo r='lightgreen';
else if (bgchange.value=='3')
document.getElementById('bg').style.backgroundColo r='lightyellow';
} [/CODE}

credo che l'errore stia nel primo if cerchi di accedere ad una variabile che non è stata dichiarata "bgchange"... non so come mai su IE funziona perche effettivamente c'è questo errore...

ti consiglio di cambiare la chaimata alla funzione cosi:

codice:

<select name="background_color" id="bgchange" onchange="bg_color(this)">

e il metodo cosi:

codice:

function bg_color(bgchange)

**Vindav** · 14-12-2010, 16:10

che casino ho fatto!!

Spero si capisca cmq...

**cavicchiandrea** · 14-12-2010, 16:30

Insisto l'errore e nella sintassi, ed essendo una select la sintassi corretta è: if (document.getElementById('bgchange').options[document.getElementById('bgchange').selectedIndex].value=='0') poi sarebbe meglio racchiudere i vari if tra le graffe {} (non è obbligatorio ma per esperienza risulta migliore)

P.S. Ricordo che il doctype che indica al browser come va lette la pagina (eccetto i vecchi IE che non ne tenevano conto e si vedeva la pagina male)

Discussione: Problema document.getElementById con Firefox!

Strumenti discussione

Ricerca discussione

Visualizza

Problema document.getElementById con Firefox!

Permessi di invio