Problema salvataggio valori in array

[Alifuma92]

Ciao a tutti!

Sto provando a fare una cosa del genere:

- Cambio lo sfondo a un div con id="prova"
- Salvo il nome del colore in un array
-successivamente
- Cambio dinamicamente l'oggetto a cui cambiare lo sfondo
- Ora cambio il colore al div con id ="prova2"
-Cerco di salvare il valore del colore nello stesso array precedente, ma su una riga diversa.

Posto il js

// oggetto a cui modificare lo sfondo
var oggetto = "#prova"; 


// array dove salvare le modifiche apportate agli oggetti
var home = [];
home[oggetto] = { bg : '', color: ''};


// QUESTA FUNZIONE:
// applico il colore di sfondo a "oggetto"
// salvo il valore nell'array
// mostro con l'alert se ho inserito il valore
function cambiaLarg(valore){
    
    // faccio vedere nell'anteprima
    $(oggetto).css('background-color', valore);
    
    // salvo nell'array la proprietà CSS
    home[oggetto]['bg'] = "background-color: " + valore;
    
    alert(home[oggetto]['bg']);
    
} 


// QUESTA FUNZIONE:
// modifico la variabile globale "oggetto"
// verifico la modifica con l'alert
function cambiaOggetto(){
    oggetto = "#prova2";
    alert(oggetto);
}


// QUESTA FUNZIONE:
// stampo il contenuto dell'array che mi interessa
function stampa(){
    alert(home['#prova']['bg']);
    alert(home['#prova2']['bg']);
}

la sequenza dei passaggi è questa:
1) Scrivo "red" in una textbox che all' onchange fa partire la funzione cambiaLarg(valore) ->FUNZIONA
2) Clicco su un bottone che all'onclick fa partire la funzione cambiaOggetto() -> FUNZIONA
3) Nella textbox di prima inerisco "blue" che all' onchange fa partire la funzione cambiaLarg(valore) cambiando correttamente il colore al div #prova2, ma già qui l'alert non appare.
4) Su un altro bottone clicco per far partire la funzione stampa() che stampa il primo alert, ma il secondo no.

Sicuramente sto sbagliando nella creazione dell'array. In pratica quello che vorrei fare è creare una matrice che per ogni riga abbia le informazioni sul bg e il color di ogni oggetto.

tipo cosi:

#prova -> background-color : red -> color: white
#prova2 -> background-color : blue -> color: black

Spero di essermi spiegato correttamente... Grazie!

[Alifuma92]

nessuno?

[badaze]

Posta tutto il codice (Html incluso).

[Alifuma92]

questo è l' HTML

(racchiudo il codice tra tag ma non lo mostra...)

                
                Modifica div "#prova2"        Stampa CSS                
                        


questo invece è il file dimension.js che contiene lo script

// oggetto a cui modificare lo sfondo
var oggetto = "#prova"; 




// array dove salvare le modifiche apportate agli oggetti
var home = [];
home[oggetto] = { bg : '', color: ''};




// QUESTA FUNZIONE:
// applico il colore di sfondo a "oggetto"
// salvo il valore nell'array
// mostro con l'alert se ho inserito il valore
function cambiaLarg(valore){
    
    // faccio vedere nell'anteprima
    $(oggetto).css('background-color', valore);
    
    // salvo nell'array la proprietà CSS
    home[oggetto]['bg'] = "background-color: " + valore;
    
    alert(home[oggetto]['bg']);
    
} 




// QUESTA FUNZIONE:
// modifico la variabile globale "oggetto"
// verifico la modifica con l'alert
function cambiaOggetto(){
    oggetto = "#prova2";
    alert(oggetto);
}




// QUESTA FUNZIONE:
// stampo il contenuto dell'array che mi interessa
function stampa(){
    alert(home['#prova']['bg']);
    alert(home['#prova2']['bg']);
}

Quello che vorrei fare è creare un array esterno alle funzioni e popolarlo come se fosse una tabella di un database quindi come con dei record... ogni record contiene l'id dell'oggetto modificato e i valori delle proprietà modificate

esempio:

id - bg - color
#prova - background-color:red - color:white
#prova2 - background-color:blue - color:black



[badaze]

Il codice delle textbox e degli eventi ?

[Alifuma92]

questo è la textbox dove inerisco il colore
input type="text" onchange="cambiaLarg(this.value)" id="larg" value="#000"

questo è il bottone con cui cambio l'oggetto da modificare
button onclick="cambiaOggetto()">Modifica div "#prova2" /button

questo è il bottone con cui attivo stampa()
button onclick="stampa()">Stampa CSS /button

PS Ho scritto cosi l html perché se lo copio e lo incollo non mostra il codice

[badaze]

Prova cosi. Ho fatto in modo di fare funzionare il tuo codice ma secondo me sbagli approccio se devi aggiungere altri criteri.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script language="JavaScript" type="text/javascript">
<!--
// oggetto a cui modificare lo sfondo
// var oggetto = "#prova"; 
var oggetto; 
// array dove salvare le modifiche apportate agli oggetti
var home = new Array();
//home[oggetto] = { bg : '', color: ''};
function cambiaLarg(valore){         
 if (oggetto != null) {
   $(oggetto).css('background-color', valore);  
   if (home[oggetto] == null) {home[oggetto] = new Array();}
   home[oggetto]['bg'] = "background-color: " + valore;        
   alert(home[oggetto]['bg']);
 } else {
   alert("clicca un bottone 'Modifica ...'");
 }    
} 
function cambiaOggetto(myOggetto){
    oggetto = '#'+myOggetto;
  document.getElementById('incorso').innerHTML = 'div '+oggetto+' in corso';
  //alert(oggetto);
}
function stampa(){
    if (home['#prova'] == null) {
    alert("#prova non ancora definito");
  } else {
      alert(home['#prova']['bg']);
   }
    if (home['#prova2'] == null) {
    alert("#prova2 non ancora definito");
  } else {
      alert(home['#prova2']['bg']);
   }  
}
//-->
</script>
</head>
<body>
 <div id="prova">questo è id prova </div></br>
 <div id="prova2">questo è id prova 2</div></br>
 <hr/> 
 <div id="incorso">nessun div in corso - clicca bottone 'Modifica ...'</div></br>
 <hr/>  
 <input type="text" onchange="cambiaLarg(this.value)" id="larg" ></br>
 <hr/>
 <button onclick="cambiaOggetto('prova')" style="width:200px" >Modifica div "#prova" </button></br>
 <hr/> 
 <button onclick="cambiaOggetto('prova2')" style="width:200px" >Modifica div "#prova2" </button></br>
 <hr/>
 <button onclick="stampa()"  style="width:200px" >Stampa CSS </button></br>
</body>
</html>

[Alifuma92]

Sembrerebbe funZionare! Come dovrei impostare secondo te per aggiungere altri criteri?