Conflitto di 2 script

**mario19xx** · 05-02-2012, 09:31

Buongiorno ragazzi!

Sto lavorando un form che comprende 2 script, uno che cambia l'immagine a seconda della prima option select e l'altro determina i valori della seconda option select in base voce scelta nella prima che cambia anche l'immagine.

Il codice e questo:

Codice PHP:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/tr/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html><head> 

<script type="text/javascript"> 

var game = new Object()

game["game1"] = [{value:"1", text:"1"},

                      {value:"2", text:"2"},

                      {value:"3", text:"3"},];

game["game2"] = [{value:"12", text:"12"},

                      {value:"2", text:"2"},

                      {value:"3", text:"3"},];

 

function setGames(chooser) {

    var newElem;

    var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;

    var selectChooser = chooser.form.elements["select"];

    while (selectChooser.options.length) {

        selectChooser.remove(0);

    }

    var choice = chooser.options[chooser.selectedIndex].value;

    var db = game[choice];

    newElem = document.createElement("option");

    newElem.text = "Seleziona";

    newElem.value = "";

    selectChooser.add(newElem, where);

    if (choice != "") {

        for (var i = 0; i < db.length; i++) {

            newElem = document.createElement("option");

            newElem.text = db[i].text;

            newElem.value = db[i].value;

            selectChooser.add(newElem, where);

        }

    }

}

 

 

</script>

<script language="JavaScript" type="text/JavaScript"> 

function preloadImgs(args) { 

    for(var n=0;n<arguments.length;n++) { 

        preloadImg(arguments[n]); 

    }     

    //funzione che precarica un immagine 

    function preloadImg(game1) { 

        var temp=new Image(); 

        temp.src=cod2; 

    } 

} 

function _removeChild(parent,child){ 

    if(child != null){ 

        parent.removeChild(child); 

    } 

}; 

function changeImg(el){ 

    var ext= '.png'; 

    var target= document.getElementById("target"); 

    if(!target){return;} 

     var optionValue = el.options[el.selectedIndex].value; 

    var currentImage= optionValue.concat(ext); 

    var img = document.createElement("img"); 

    img.src= currentImage; 

    var tmp= target.getElementsByTagName('img').item(0); 

    _removeChild(target,tmp); 

    target.appendChild(img); 

} 

window.onload = function(){ 

    preloadImgs('game1.png','game2.png','game3.png'); 

    var sel = document.getElementById("gametype"); 

    sel.onchange=function(){ 

        changeImg(sel);  

    } 

} 

</script> 



</head> 

 

 

<body> 

<div align="center">

<div id="target">[img]game1.png[/img]</div> 

<form name="form"> 

Game: 

<select name="game" onchange="setGames(this)" id="gametype"> 

<option value="game1" selected="selected">Seleziona</option> 

<option value="game1">Game1<option> 

<option value="game2">Game2</option> 

<option value="game3">Game3</option> 

</select> 

<select name="select"> 

<option value="" selected="selected">Seleziona</option> 

</select> 

</form> 

</div> 

</body></html>

Separatamente funzionano bene ma se gli unisco cambia solo l'immagine.
Idee su come sistemare?

**cavicchiandrea** · 05-02-2012, 10:22

Ho dato una sistema togliendo e cambiando alcune cose copia tutto da <!DOCTYPE... a </html> se non dovesse ancora andare posta un link ad una pagina pubblica per verificare, testare il tutto.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>Untitled Document</title> 
<script type="text/javascript"> 
var game = new Object()
game["game1"] = [{value:"1", text:"1"},
                      {value:"2", text:"2"},
                      {value:"3", text:"3"},];
game["game2"] = [{value:"12", text:"12"},
                      {value:"2", text:"2"},
                      {value:"3", text:"3"},];
 
function setGames(chooser) {
    var newElem;
    var where = (navigator.appName == "Microsoft Internet Explorer") ? -1 : null;
    var selectChooser = chooser.formGame.elements["select"];
    while (selectChooser.options.length) {
        selectChooser.remove(0);
    }
    var choice = chooser.options[chooser.selectedIndex].value;
    var db = game[choice];
    newElem = document.createElement("option");
    newElem.text = "Seleziona";
    newElem.value = "";
    selectChooser.add(newElem, where);
    if (choice != "") {
        for (var i = 0; i < db.length; i++) {
            newElem = document.createElement("option");
            newElem.text = db[i].text;
            newElem.value = db[i].value;
            selectChooser.add(newElem, where);
        }
    }
}

function preloadImgs(args) { 
    for(var n=0;n<arguments.length;n++) { 
        preloadImg(arguments[n]); 
    }     
    //funzione che precarica un immagine 
    function preloadImg(game1) { 
        var temp=new Image(); 
        temp.src=cod2; 
    } 
} 
function _removeChild(parent,child){ 
    if(child != null){ 
        parent.removeChild(child); 
    } 
}; 
function changeImg(el){ 
    var ext= '.png'; 
    var target= document.getElementById("target"); 
    if(!target){return;} 
     var optionValue = el.options[el.selectedIndex].value; 
    var currentImage= optionValue.concat(ext); 
    var img = document.createElement("img"); 
    img.src= currentImage; 
    var tmp= target.getElementsByTagName('img').item(0); 
    _removeChild(target,tmp); 
    target.appendChild(img); 
} 
window.onload = function(){ 
    preloadImgs('game1.png','game2.png','game3.png'); 
    var sel = document.getElementById("gametype"); 
    sel.onchange=function(){ 
        changeImg(sel);  
    } 
} 
</script> 

</head> 
 
 
<body> 
<div align="center">
<div id="target">[img]game1.png[/img]</div> 
<form name="formGame" id="formGame"> 
Game: 
<select name="game" onchange="setGames(this)" id="gametype"> 
<option value="game1" selected="selected">Seleziona</option> 
<option value="game1">Game1</option><option> 
</option>
<option value="game2">Game2</option> 
<option value="game3">Game3</option> 
</select> 
<select name="select"> 
<option value="" selected="selected">Seleziona</option> 
</select> 
</form> 
</div> 
</body></html>

**mario19xx** · 05-02-2012, 11:17

Purtroppo ora non cambia ne immagine ne il secondo select. l'ho uppato su un sito altervista. ecco il link:

http://fastdown.altervista.org/

**cavicchiandrea** · 05-02-2012, 11:41

Due errori
1) è un errore mio cambia questa riga:
var selectChooser = chooser.formGame.elements["select"];
con questa:
var selectChooser = chooser.form.elements["select"];
2) è un errore (probabilmente di copia/incolla) questa variabile:
cod2 non è definita prova a cambiarla con game1

**mario19xx** · 05-02-2012, 11:48

Corretti i 2 errori cambia l'immagine ma non crea le option del select.

**cavicchiandrea** · 05-02-2012, 12:31

<select name="game" onchange="setGames(this)" id="gametype">
<option value="game1" selected="selected">Seleziona</option>
<option value="game1">Game1</option>
<option value="game2">Game2</option>
<option value="game3">Game3</option>
</select>
Sia il primo value che il secondo sono uguali prova a canbiare cosi:
<select name="game" onchange="setGames(this)" id="gametype">
<option value="Seleziona" selected="selected">Seleziona</option>
<option value="game1">Game1</option>
<option value="game2">Game2</option>
<option value="game3">Game3</option>
</select>
poi dovrai avere una terza array qui:
game["game1"] = [{value:"1", text:"1"},
{value:"2", text:"2"},
{value:"3", text:"3"},];
game["game2"] = [{value:"12", text:"12"},
{value:"2", text:"2"},
{value:"3", text:"3"},];
game["game3"] = [.....];

**mario19xx** · 05-02-2012, 12:44

Fatto ma niente..

**cavicchiandrea** · 05-02-2012, 14:58

http://webandylab.altervista.org/demo-2.html

**mario19xx** · 05-02-2012, 21:50

Funziona benissimo. Sei stato gentilissimo.

Un ultima domanda se posso.

sempre nello stesso form ho inserito un preventivo con onChange e una variabile che calcola il prezzo totale

Codice PHP:




<div align=center><table> 

<tr><td>Game: </td> 

<td><select name="game" onchange="setGames(this)" onChange="changePrice();" id="gametype" style="width:175"> 

<option value="bf2" selected="selected">Seleziona</option> 

<option value="bf2">Battlefield 2</option> 

<option value="bf2142">Battlefield 2142</option> 

<option value="cod2">Call of Duty 2</option> 

<option value="cod4">Call of Duty 4</option> 

<option value="cod5">Call of Duty 5</option> 

<option value="cod6">Call of Duty MW2</option> 

<option value="cod8">Call of Duty MW3</option> 

<option value="cs">Counter Strike 1.6</option> 

<option value="csgo">Counter Strike GO</option> 

<option value="css">Counter Strike Source</option> 

<option value="l4d">Left 4 Dead</option> 

<option value="l4d2">Left 4 Dead 2</option> 

<option value="min">Minecraft</option> 

<option value="samp">San Andreas (SAMP)</option> 

</select></td></tr>

Questa e la riga del calcolo

Codice PHP:




var totalt = document.getElementById("totalprice"); 



totalt.value=  roundNumber(((slot*0.15)+type+tag)/100*period,2);

Quando nel form vado a cambiare il gioco dopo averne selezionato uno precedentemente siccome nel totalt.value la value game non viene interpellata il prezzo rimane fermo dalla precedente selezione e bisogna selezionare il secondo select per cambiarlo. Sai se e possibile impostare un value del campo totalprince a 0 qaundo si cambia il gioco?

**cavicchiandrea** · 05-02-2012, 22:02

Aggiorna la pagina demo completa con le modifiche ho apportato.

Discussione: Conflitto di 2 script

Strumenti discussione

Ricerca discussione

Visualizza

Conflitto di 2 script

Permessi di invio