Domanda Mappa con bootstrap

[TheSeeker]

Codice bottone:
<input type="button" id="pulsante"..... onClick=" funzione() " />
l'evento si chiama "onClick" e permette di aprire una funzione javascript.
Per cambiare il css ci sta la proprietà "style".
Tecnicamente il codice da mettere nella funzione sarebbe:

document.getElementById("pulsante").style.color="red";

Non avevo visto la risposta ^^'

 

[Valley]

Ho probato così ma non mi cambia colore

<button type="button" id="myButton" class="btn" onclick="cambia1d2()">
                              Aula Magna
                        </button>
                        <script>
                              function cambia1d2() {
       
                            var piano1d1 = document.getElementById("piano1d1").style.background = "#FFFFF";
       
                            }
                        </script>

 

[Kolo93]

La proprietà si chiama "background-color"

 

[Valley]

La proprietà si chiama "background-color"

Ho provato a mettere così ma non cambia.
Ho notato però questo:

Prima di cliccare la pagina appare così:

Poi diventa così:

Quello che dovrebbe cambiare è piano1d2 non piano1d1 e poi mette in style nulla, come se non vedesse il "contenuto"

 

[Valley]

Mi correggo metteva " style="" " dentro piano1d1 perchè avevo scritto io piano1d1 xD

Ho corretto ma lo mette comunque vuoto

 

[Valley]

Codice attuale:

<button type="button" id="myButton" class="btn" onclick="cambia1d2()">
                              Aula Magna
                        </button>
                        <script>
                              function cambia1d2() {
       
                            var piano1d1 = document.getElementById("piano1d2").style.backgroundColor = "#87779d";
       
                            }
                        </script>

 

[Valley]

RISOLTO FUNZIONA col codice sopra, dava problemi perchè avevo messo come colore #FFFFF xD

 

[Kolo93]

Trovato! Non ricordavo quale fosse l'altro codice per il css.
Dai uno sguardo qui http://www.w3schools.com/jsref/met_element_setattribute.asp
Esempio:

oggetto.setAttribute("background-color","#F00");

 

[Valley]

Ora una domanda @Kolo93 e @TheSeeker :
Devo fare un altro bottone con la stessa funzione.
Però se clicco il bottone 1 (si colora il box1) e poi clicco il bottone 2 (si colora il box2) deve tornare al colore di prima il box1.

Consigli?

 

[Kolo93]

Gli fai un controllo nel javascript:
Se rosso allora fallo diventare blu,
se blu allora fallo diventare rosso.

Ho fatto uno schifo di esempio ma giusto per farti capire

 

[Valley]

Capito, vedo se capisco anche il codice da usare

 

[Valley]

Devo fare qualcosa del tipo:

document.getElementById("piano1d2");

if piano1d2.style.background-color="#eccecc" {
     piano1d2.style.background-color="#altroecc";
     }
else {
         piano1d2.style.background-color="#altroecc2";
       }

 

[Kolo93]

La sintassi corretta è:

if ( condizione ) //attento alle parentesi, tu non le hai messe

Poi devi stare attento perchè "=" assegna e "==" compara.
Quindi se voglio dare valori alle variabili faccio: var x=5;
Mentre se devo comparare faccio: if (x==5)

 

[Valley]

La sintassi corretta è:

if ( condizione ) //attento alle parentesi, tu non le hai messe

Poi devi stare attento perchè "=" assegna e "==" compara.
Quindi se voglio dare valori alle variabili faccio: var x=5;
Mentre se devo comparare faccio: if (x==5)

Cavolo ci ho pensato ora: non posso usare questo perchè se no dovrei fare che ogni bottone ha un controllo (if) che controlla tutti gli altri bottoni..
Devo fare in modo che mi cambi css al div che è selezionato dal bottone che clicco.

Penso sfruttando qualcosa del genere
#room1:focus, #room1:active {
background-color: #BLABLA;
}

 

[Kolo93]

Dipende che vuoi fare in particolare, poi non so come hai strutturato l'intero progetto quindi non posso esserti di aiuto al 100%

 

[Valley]

Dovrei fare una cosa del genere:

<button type="button" id="myButton" class="btn">
Aula Magna
</button>

nel css:
#myButton:focus {

/* qui trovare il modo di collegare il css di piano1d2 e cambiargli il valore di background-color */

}

 

[Kolo93]

L'attributo focus attiva l'evento solamente se passi sopra l'elemento col mouse.
Al limite puoi dare due regole css, come: .prova1{ colore rosso } e .prova2{ colore blu }
E poi cambiare la classe dell'elemento che ti interessa a seconda delle tue esigenze, sempre dal javascript.

 

[Valley]

L'attributo focus attiva l'evento solamente se passi sopra l'elemento col mouse.
Al limite puoi dare due regole css, come: .prova1{ colore rosso } e .prova2{ colore blu }
E poi cambiare la classe dell'elemento che ti interessa a seconda delle tue esigenze, sempre dal javascript.

Sto provando così:

<button type="button" id="cambiopiano1d2" onfocus="sel('cambiopiano1d2')"  onblur="des('cambiopiano1d2')" class="btn">
                              Aula Magna
                        </button>
                       
                        <button type="button" id="cambiopiano1d5" onfocus="sel('cambiopiano1d5')"  onblur="des('cambiopiano1d5')" class="btn">
                              Aula Magna2
                        </button>
                        <script type="text/javascript">
                             function sel(cambiopiano1d2) {
                             if (!document.getElementById) return;
                             cambio1d2 = document.getElementById(piano1d2);
                             cambio1d2.style.backgroundColor = "#87779D";
                             }
                             function des(cambiopiano1d2) {
                             if (!document.getElementById) return;
                             cambio1d2 = document.getElementById(piano1d2);
                             cambio1d2.style.backgroundColor = "#F00";
                             }
                            function sel(cambiopiano1d5) {
                             if (!document.getElementById) return;
                             cambio1d5 = document.getElementById(piano1d5);
                             cambio1d5.style.backgroundColor = "#87779D";
                             }
                             function des(cambiopiano1d5) {
                             if (!document.getElementById) return;
                             cambio1d5 = document.getElementById(piano1d5);
                             cambio1d5.style.backgroundColor = "#F00";
                             }
                        </script>

 

[Valley]

ovviamente non va

 

[Kolo93]

Gli elementi del DOM vengono considerati come degli oggetti, quindi se vuoi far funzionare la cosa devi mettere onClick="sel( this )"
Ma oltre a questo anche il resto sta sbagliato, non tutto ma le cose principali xD

 

[Valley]

Ma cavolo un sito internet diceva così xD come posso imparare bene se quello che leggo è sbagliato ahah

Ho provato a riordinare così (problema persiste)

<button type="button" id="cambiopiano1d2" onfocus="sel1()"  onblur="des2()" class="btn">
                              Aula Magna
                        </button>
                        <button type="button" id="cambiopiano1d5" onfocus="sel3()"  onblur="des4()" class="btn">
                              Aula Magna2
                        </button>
                        <script type="text/javascript">
                             function sel1() {
                             document.getElementById(piano1d2).style.backgroundColor = "#87779D";
                             }
                             function des2() {
                             document.getElementById(piano1d2).style.backgroundColor = "#F00";
                             }
                            function sel3() {
                             document.getElementById(piano1d5).style.backgroundColor = "#87779D";
                             }
                             function des4() {
                             document.getElementById(piano1d5).style.backgroundColor = "#F00";
                             }
                        </script>

 

[Kolo93]

document.getElementById("piano1d2").style.tuttoilresto
Non dimenticare le virgolette perchè non è una variabile.

Altrimenti puoi fare

<button type="button" id="cambiopiano1d2" onfocus="sel1()"  onblur="des2()" class="btn">

e nel javascript

function sel1( elemento ){
elemento.style.backgroundColor = "#87779D";
}

 

[Kolo93]

Ho sbagliato a scrivere e non riesco a modificare il messaggio, il codice corretto è

<button type="button" id="cambiopiano1d2" onfocus="sel1( this )"  onblur="des2()" class="btn">

 

[Valley]

Ho sbagliato a scrivere e non riesco a modificare il messaggio, il codice corretto è

<button type="button" id="cambiopiano1d2" onfocus="sel1( this )"  onblur="des2()" class="btn">

Senza mettere document.getElementById() ?

 

[Kolo93]

Esatto, quel pezzo di codice va a cercare l'elemento nel DOM ma se glielo passo tramite parametro, in questo cosa il "this", non c'è bisogno di andare a cercarlo visto che glielo stai dando direttamente te