Problema con valore style.color in Esadecimale

A

andreto

Utente Attivo
5 Dic 2012
88
0
0
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

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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>
 
A

andreto

Utente Attivo
5 Dic 2012
88
0
0
Ciao helpdesk hai preso il codice n°1 che già funzionava.

E' il codice n°3 che non funziona!
 
helpdesk

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
Ciao, no ho preso il numero 3 quello sotto a dove hai scritto che non funziona nel post
qual'è quello che non funziona?
 
Ultima modifica:
helpdesk

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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>
 
A

andreto

Utente Attivo
5 Dic 2012
88
0
0
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>
 
S

senatoremasweb

Nuovo Utente
13 Apr 2013
2
0
0
Empoli
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>
Clicca per allargare...
 
A

andreto

Utente Attivo
5 Dic 2012
88
0
0
Vorrei utilizzare valori esadecimali.

Non capisco perché non funziona!

Possibile che nessuno lo sa?
 
helpdesk

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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>
 
Ultima modifica:
A

andreto

Utente Attivo
5 Dic 2012
88
0
0
Grazie helpdesk,
ma vorrei capire il pechè non digerisce il codice Esadecimale
mentre RGB e colore (black e red) li digerisce benissimo...
 
helpdesk

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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.
 
Ultima modifica:
helpdesk

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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 :)
 
Ultima modifica:
A

andreto

Utente Attivo
5 Dic 2012
88
0
0
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.
Clicca per allargare...

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
Clicca per allargare...

è 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

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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 :)
 
A

andreto

Utente Attivo
5 Dic 2012
88
0
0
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

helpdesk

Utente Attivo
30 Set 2009
726
0
0
Pesaro
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.
 
A

andreto

Utente Attivo
5 Dic 2012
88
0
0
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.
Clicca per allargare...

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. :)
Clicca per allargare...

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>
 
Devi accedere o registrarti per poter rispondere.
Discussioni simili
Autore Titolo Forum Risposte Data
A Problema checkbox checked con valore prelevato da db PHP 1
O problema recupero valore con getElementById Ajax 0
O problema con dvr dahua xvr5116 IP Cam e Videosorveglianza 0
G Problema con Xampp Web Server 1
andrea barletta Problema con miniature comandi Photoshop 0
I problema con alice Posta Elettronica 0
N Problema con position absolute e overflow HTML e CSS 4
L Problema con inner join PHP 11
K [php] Problema con inner join PHP 4
K [PHP] Problema con variabili concatenate. PHP 1
O problema con query PHP 4
I problema con 2 account Posta Elettronica 1
L problema collegamento file css con html HTML e CSS 1
E Problema accesso a file con app sviluppata con MIT APP INVENTOR 2 Sviluppo app per Android 0
M Problema con Try Catch PHP 0
Sergio Unia Problema con gli eventi del mouse su una data table: Javascript 2
T PROBLEMA CON SESSIONI PHP 3
T ALTRO PROBLEMA CON ARRAY PHP PHP 1
R problema con else PHP 0
T PROBLEMA CON ARRAY PHP 8
L problema con query select PHP 2
R Problema query con ricerca id numerico PHP 2
F Problema con risposta PHP 0
S problema con recupero dati tabella mysql PHP 2
Z Problema con il mio tp-l i nk Reti LAN e Wireless 1
L Problema RAM con Tomcat 8 Apache 0
napuleone problema con sort e asort PHP 4
Z Problema con INT MySQL PHP 1
Z Problema database MySQL con XAMPP PHP 0
M Problema con controllo form in real time jQuery 6
Z Problema di sincronizzazione PAYPAL con PHP PHP 1
G Problema con Get page PHP 4
P Problema con require once PHP 6
P Problema con i package Java 1
A Problema login con Safari PHP 14
F INDESIGN: problema esportazione esecutivo per la stampa con foto B/N Webdesign e Grafica 0
S problema con css bootstrap3 HTML e CSS 4
M .load() problema con caricamenti dinamici di js Javascript 0
G Problema con eccessiva nitidezza apertura Camera Raw Photoshop 0
G Problema ------- con Query PHP 1
G Problema con Query PHP 1
T problema con select dinamica con jquery Javascript 0
S Problema con spazi bianchi HTML e CSS 5
A PROBLEMA: insert mysqli con dati Tagsinput Presentati al Forum 0
Tommy03 Problema con z-index HTML e CSS 3
M Problema inserimento parole con apostrofo nel db PHP 5
C Problema con dati meteo xml XML 1
S Problema con infrarossi videocamera IP Cam e Videosorveglianza 1
V Problema con librerie allegro5 c++ C/C++ 1
M Problema con php per calcolo costo percentuale PHP 7

Discussioni simili

Alto Basso