Cambiare il colore dello stesso oggetto HTML con onclick

**websky** · 12-11-2014, 23:39

Ciao a tutti
Premetto: Noob
Sto studiando JS da pochi mesi. Da un paio di giorni sono fermo su un banale script . ho u div semplicemente voglio cambiare il colore cliccandoci su.
Riesco a farlo la prima volta ma se voglio ritornare indietro al colore originale ri'cliccandoci, non riesco a creare uno script valido. ho provato con la condizione "If" ma non funziona. ecco qua
HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exercise 1</title>
<script src="exercise1.js"></script>
<script type ="text/javascript"></script>
<style>
#box {
width: 100px;
height: 100px;
border: 2px solid red;

}

</style>
</head>
<body>
<div id ="box" onclick ="changeColor();">Clicca qua</div>

</body>
</html>

e lo script JS

function changeColor() {
document.getElementById('box').style.backgroundCol or = "#299930";
}

Ringrazio tutti in anticipo per l'aiuto
Paolo

**badaze** · 13-11-2014, 01:07

Puoi fare cosi.

Codice PHP:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exercise 1</title>

<script type ="text/javascript">
var coloreOriginale = null;
function changeColor() {
  if (coloreOriginale == null) {
    coloreOriginale = document.getElementById('box').style.backgroundColor;
  }
  if (document.getElementById('box').style.backgroundColor == coloreOriginale) {
    document.getElementById('box').style.backgroundColor = "#299930";
  } else {
    document.getElementById('box').style.backgroundColor = coloreOriginale;
  }
} // function changeColor()
</script>
<style>
#box {width: 100px;height: 100px;border: 2px solid red;}
</style>
</head>
<body>
<div id ="box" onclick ="changeColor();">Clicca qua</div>
</body>
</html>

**cavicchiandrea** · 13-11-2014, 01:48

Oppure più sintetico in linea
<div id ="box" onclick ="this.style.backgroundColor=(this.style.backgroun dColor == '')? '#29930' : ''">Clicca qua</div>

Discussione: Cambiare il colore dello stesso oggetto HTML con onclick

Strumenti discussione

Ricerca discussione

Visualizza

Cambiare il colore dello stesso oggetto HTML con onclick

Tag per questa discussione

Permessi di invio