Problema con valore style.color in Esadecimale

andreto · 13 Apr 2013

Ciao a tutti, sto praticamente impazzendo!

Ho questi 3 codici identici ma quello con i valori in esadecimale non funziona ne in IE10 ne in Chrome!

Qualcuno può aiutarmi a capire il perché? :fonzie:

1) Funziona sia con IE10 che con Chrome

Codice:

<html>

<head>

<script>
function cambia(){
if(document.getElementById("testo").style.color == "black"){
document.getElementById("testo").style.color = "red";
}
else{
document.getElementById("testo").style.color = "black";
}
}
setInterval("cambia()",1000);
</script>

</head>

<body>
<p id="testo"> ciao </p>
</body>

</html>

2) Funziona sia con IE10 che con Chrome

Codice:

<html>

<head>

<script>
function cambia(){
if(document.getElementById("testo").style.color == "rgb(0, 0, 0)"){
document.getElementById("testo").style.color = "rgb(256, 0, 0)";
}
else{
document.getElementById("testo").style.color = "rgb(0, 0, 0)";
}
}
setInterval("cambia()",1000);
</script>

</head>

<body>
<p id="testo"> ciao </p>
</body>

</html>

3) NON FUNZIONA ne con IE10 ne con Chrome

Codice:

<html>

<head>

<script>
function cambia(){
if(document.getElementById("testo").style.color == "#000000"){
document.getElementById("testo").style.color = "#FF0000";
}
else{
document.getElementById("testo").style.color = "#000000";
}
}
setInterval("cambia()",1000);
</script>

</head>

<body>
<p id="testo"> ciao </p>
</body>

</html>

Dove sbaglio?

helpdesk · 13 Apr 2013

Ciao prova cosi':
L'ho testato funziona

Ti basterà fare il copia e incolla nella pagina ma attento ai tag body e head.

PHP:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Documento senza titolo</title>
</head>
<script>
  
  setInterval("cambia()",1000);
  function cambia(){ 
   if(document.getElementById("testo").style.color == "black"){
     document.getElementById("testo").style.color = "red";
   }else{
    document.getElementById("testo").style.color = "black";
   }
 }
  
</script>

</head>

 <body>
  <p id="testo"> ciao </p>
 </body>

</html>

andreto · 13 Apr 2013

Ciao helpdesk hai preso il codice n°1 che già funzionava.

E' il codice n°3 che non funziona!

helpdesk · 13 Apr 2013

Ciao, no ho preso il numero 3 quello sotto a dove hai scritto che non funziona nel post
qual'è quello che non funziona?

helpdesk · 13 Apr 2013

Se è quello con i valori numerici prova cosi':

PHP:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Cambia Colore</title>
</head>
<html>

<head>

<script>
 
setInterval("cambia()",1000);
function cambia(){
  if(document.getElementById("testo").style.color == "rgb(0, 0, 0)"){
     document.getElementById("testo").style.color = "rgb(256, 0, 0)";
  }else{
     document.getElementById("testo").style.color = "rgb(0, 0, 0)";
  }
 }
 
</script>

</head>

<body>
<p id="testo"> ciao </p>
</body>

</html>
<body>

andreto · 13 Apr 2013

questo è quello che non funziona:

Codice:

<html>

<head>

<script>
function cambia(){
if(document.getElementById("testo").style.color == "#000000"){
document.getElementById("testo").style.color = "#FF0000";
}
else{
document.getElementById("testo").style.color = "#000000";
}
}
setInterval("cambia()",1000);
</script>

</head>

<body>
<p id="testo"> ciao </p>
</body>

</html>

senatoremasweb · 13 Apr 2013

Come usare il Colore rgb (javascript) senza convertire in hex color

Ciao prova cosi'
document.getElementById('idElement').style.backgroundColor = 'rgb(x, y, z)';

Ciao
Massimo

andreto ha scritto:

questo è quello che non funziona:

Codice:

<html>

<head>

<script>
function cambia(){
if(document.getElementById("testo").style.color == "#000000"){
document.getElementById("testo").style.color = "#FF0000";
}
else{
document.getElementById("testo").style.color = "#000000";
}
}
setInterval("cambia()",1000);
</script>

</head>

<body>
<p id="testo"> ciao </p>
</body>

</html>

andreto · 13 Apr 2013

Vorrei utilizzare valori esadecimali.

Non capisco perché non funziona!

Possibile che nessuno lo sa?

helpdesk · 13 Apr 2013

Pronti

ecco qua:
L'ho testato con Safari, IE, Chrome e Firefox e funziona.

PHP:

<script>
 
  window.onload = function() {
    var colori= new Array("#000","#F00");
    var colore_testo = document.getElementById('testo');
    var conta_array =0;
    colore_testo.style.color = colori[conta_array];
   setInterval(function() {
     conta_array += 1;
     colore_testo.style.color = colori[conta_array];
     
     if(conta_array == 2) {
          conta_array=0;
          colore_testo.style.color = colori[conta_array];
          }
       }, 1000);
      };


</script>

</head>

<body>
<p id="testo"> ciao </p>
</body>

andreto · 13 Apr 2013

Grazie helpdesk,
ma vorrei capire il pechè non digerisce il codice Esadecimale
mentre RGB e colore (black e red) li digerisce benissimo...

helpdesk · 13 Apr 2013

Ciao, bhe, sinceramente l'esercizio che mi hai dato da fare tu oggi è stato interessante.
Per quanto concerne il calcolo che hai postato tu in realtà non riconosceva il colore di inizio come nero
pertanto riusciva a soddisfare solo la parte else della condizionale mostrando
quindi sempre il colore nero.
Tuttavia anche dopo aver letto e studiato libri, guide e materiale di ogni sorta
relativo a Js ci sono cosette di lui che vanno ancora accettate per fede.
Posso dirti che JS non è mai stato una cima con i calcoli e i numeri quindi...
Inoltre anche Actionscript riconosce i colori esadecimali con 0x e non con #000
sono due fratelli dispettosi.

Comunque lo script che ti ho mostrato funziona,
se invece il tuo intento è quello di cambiare dinamicamente il colore al testo
magari " da una form " allora il discorso cambia, ma paradossalmente diventa piu' semplice.

helpdesk · 13 Apr 2013

Dimenticavo, l'esempio che ti ho postato mostra i colori con i valori
esadecimali leggendoli da un array, se cambi quelli cambia colore
il primo è quello di partenza l'altro è quello che cambia ogni secondo.
La logica può essere associata anche direttamente alla lunghezza dell'array per mostrare
tutti i colori prima di ripartire in questo modo if(conta_array == colori.length) {
nel caso si vogliano inserire piu' di due colori

andreto · 13 Apr 2013

helpdesk ha scritto:
Per quanto concerne il calcolo che hai postato tu in realtà non riconosceva il colore di inizio come nero
pertanto riusciva a soddisfare solo la parte else della condizionale mostrando
quindi sempre il colore nero.

Si lo so, ma era voluto,
infatti qualsiasi colore di inizio c'era (tranne il nero), lui passava all'else che lo trasformava in nero e di conseguenza tutto ricominciava passando dall'if.

Infatti con RGB e "black" o "red" funzionava bene.

Non capisco proprio!

Pensa che invece questo funziona benissimo:

Codice:

<html>
 <head>
 <script>
 function displayResult()
 {
 document.getElementById("p1").style.color="#000000";
 document.getElementById("p2").style.color="#FF0000";
 }
 </script>
 </head>
 <body>

 <p id="p1">This is an example paragraph.</p>
 <p id="p2">This is also an example paragraph.</p>

 <input type="button" onclick="displayResult()" value="Change text color">

 </body>
 </html>

Eppure non vedo grosse differenze.

mah...

dato che sto iniziando a studiare, sto cercando di imparare, ma imparare

helpdesk ha scritto:
cosette di lui che vanno ancora accettate per fede

è un grosso problema.

Se sai qualcosa in più in merito a questo argomento te ne sono molto grato.

Almeno capire perché questo secondo codice funziona bene pur utilizzando sempre l'esadecimale.

Ciao e grazie

helpdesk · 13 Apr 2013

L'esempio che hai appena mostrato è al click non automatizzato con un timer.
Con il timer da problemi.
Perchè? lo scopriremo tra altri 7 testi forse

andreto · 13 Apr 2013

Permettimi ancora un paio di domande.

Quando hai scritto:

Codice:

var colori= new Array("#000","#F00");

intendevi nero, rosso?
Il colori in esadecimale non vanno indicati con 6 cifre/lettere dopo il #? Perché ne hai messi solo 3? il rosso non ha 2 F?

La seconda domanda è:
perché forzare con window.onload la lettura dello script:

Codice:

var colori= new Array("#000","#F00");
    var colore_testo = document.getElementById('testo');
    var conta_array =0;
    colore_testo.style.color = colori[conta_array];

non dovrebbe caricare in automatico le variabili all'apertura della pagina?

Abbi pazienza ma sono all'inizio :fonzie:

helpdesk · 14 Apr 2013

Ciao, ti rispondo subito.
Intanto sono due ottime domande complimenti.

Per i colori esadecimali: ho inserito solo 3 dei 6 valori semplicemente
per testare i browser e la loro codifica in modo da stressare
ulteriormente lo script " ovviamente è meglio essere precisi e inserirne 6 ".
Per quanto concerne la forzatura a windows non si tratta di una forzatura ma di un
obbligo poichè JS gestisce i timer tramite le funzioni globali setTimeout() e setInterval().
E per globali si intende che queste funzioni sono parte diretta dell’oggetto globale window.
Spero di essermi spiegato.

Ovviamente se provi " ma avrai sucuramente già provato " ad inserire non
3 valori ma bensi' 6 ti accorgerai che lo script codifica ugualmente i colori.

andreto · 14 Apr 2013

helpdesk ha scritto:
Ciao, ti rispondo subito.
Intanto sono due ottime domande complimenti.
Per i colori esadecimali: ho inserito solo 3 dei 6 valori semplicemente per testare i browser e la loro codifica in modo da stressare ulteriormente lo script " ovviamente è meglio essere precisi e inserirne 6 ".
Ovviamente se provi " ma avrai sicuramente già provato " ad inserire non 3 valori ma bensì 6 ti accorgerai che lo script codifica ugualmente i colori.

Ti ringrazio di aver utilizzato la forma breve per indicare i colori, questa è la prima volta che la vedo usare.
Mi hai dato la possibilità di approfondire lo studio riuscendo a capire che i colori possono essere rappresentati in diversi modi:

color: #f00; #rgb (*)
color: #ff0000; #rrggbb
color: rgb(255, 0, 0); integer range 0 - 255
color: rgb(100%, 0%, 0%); float range 0.0% - 100.0%
color: red; color keyword

(*) La forma breve a 3 cifre viene convertita dal browser nella forma classica a 6 cifre in questo modo:
es. #F00 diventa #FF0000
#ABC diventa #AABBCC

helpdesk ha scritto:
Per quanto concerne la forzatura a windows non si tratta di una forzatura ma di un
obbligo poichè JS gestisce i timer tramite le funzioni globali setTimeout() e setInterval().
E per globali si intende che queste funzioni sono parte diretta dell’oggetto globale window.
Spero di essermi spiegato.

Intendevo dire una cosa simile a questa sotto, ma ovviamente non funziona!

HTML:

<html>

<head>

<script>
   
    // assegno alle variabili i valori
    var colori= new Array("#000","#F00");
    var colore_testo = document.getElementById('testo');
    var conta_array =0;
    colore_testo.style.color = colori[conta_array];
	
	// richiamo la funzione
	inizio(); 
		
   function inizio() {
     conta_array += 1;
     colore_testo.style.color = colori[conta_array];
     
     if(conta_array == 2) {
          conta_array=0;
          colore_testo.style.color = colori[conta_array];
          }
		  setTimeout("inizio()", 1000); // ripeto la funzione inizio dopo 1 secondo (per sempre)
       }

</script>

</head>

<body>
<p id="testo"> ciao </p>
</body>

</html>

Cercavo di capire dove stava l'errore facendo prove su prove a poi mi sono anche accorto che questi 2 script non funzionano e non capisco il motivo.

HTML:

<html>

<head>

<script>  

inizio(); 
		
 function inizio() {
   
	 document.getElementById("testo").style.color = "red";
	 
      }

</script>

</head>

<body>

<p id="testo"> ciao </p>

</body>

</html>

oppure questo:

HTML:

<html>

<head>

<script> 
   
	 document.getElementById("testo").style.color = "red";

</script>

</head>

<body>

<p id="testo"> ciao </p>

</body>

</html>

Cerca

Cerca

Problema con valore style.color in Esadecimale

andreto

Utente Attivo

helpdesk

Utente Attivo

andreto

Utente Attivo

helpdesk

Utente Attivo

helpdesk

Utente Attivo

andreto

Utente Attivo

senatoremasweb

Nuovo Utente

andreto

Utente Attivo

helpdesk

Utente Attivo

andreto

Utente Attivo

helpdesk

Utente Attivo

helpdesk

Utente Attivo

andreto

Utente Attivo

helpdesk

Utente Attivo

andreto

Utente Attivo

helpdesk

Utente Attivo

andreto

Utente Attivo

Discussioni simili