Contacaratteri non cambia colore

[Ht28]

Quando mancano 20 caratteri il colore predefinito del contatore cambia e diventa "prerosso", se però a 20 cancello un qualche carattere e rientro nei 20, il colore del contatore non ridiventa colore predefinito ma rimane sempre "prerosso". Praticamente non ridiventa colore predefinito.

Mentre invece per il secondo codice, quello che fa diventare il contatore rosso, è tutto a posto, se vado sotto 10 diventa rosso, se rientro nei 10 ridiventa il colore precedente e cioè "prerosso"

function conta(el) {
var max_char = 50; // Limite massimo di caratteri consentiti
var conta_caratteri = el.value.length;
if(conta_caratteri >= max_char) {
conta_caratteri = max_char;
el.value = el.value.substring(0, max_char);
}
document.getElementById("Contatore").innerHTML = max_char - conta_caratteri;
if(max_char - conta_caratteri < 20) {  // A 20 caratteri rimanenti il contatore diventa #a60101
document.getElementById("charCount").className = 'prerosso';
}
document.getElementById("Contatore").innerHTML = max_char - conta_caratteri;
if(max_char - conta_caratteri < 10) {  // A 10 caratteri rimanenti il contatore diventa rosso
document.getElementById("charCount").className = 'rossi';
}

...

<div id="charCount">Rimanenti 50 caratteri</div>
 } 

[br1]

E dove glielo avresti detto tu di ridiventare il colore predefinito?

[Ht28]

Originariamente inviato da br1
E dove glielo avresti detto tu di ridiventare il colore predefinito?

è nel css

[br1]

Originariamente inviato da Ht28
è nel css

Si, ciao

Nello script dov'e' l'istruzione che ripristina la classe di default?

[Ht28]

Originariamente inviato da br1
Si, ciao

Nello script dov'e' l'istruzione che ripristina la classe di default?

Ho modificato così, sembra funzionare, vedi se va bene però

function conta(el) {
var max_char = 30; // Limite massimo di caratteri consentiti
var conta_caratteri = el.value.length;
if(conta_caratteri >= max_char) {
conta_caratteri = max_char;
el.value = el.value.substring(0, max_char);
}
document.getElementById("Contatore").innerHTML = max_char - conta_caratteri;
if(max_char - conta_caratteri > 20) {  // A +20 caratteri rimanenti il contatore ridiventa #666666
document.getElementById("charCount").className = '#666666';
document.getElementById("charCount1").className = '#666666';
document.getElementById("Contatore").className = '#666666';
}
if(max_char - conta_caratteri < 20) {  // A 20 caratteri rimanenti il contatore diventa rosso
document.getElementById("charCount").className = 'rossi';
document.getElementById("charCount1").className = 'rossi';
document.getElementById("Contatore").className = 'rossi';
}
 } 

[br1]

Hai creato una classe di nome #666666 ?

Se ti funziona non toccarlo piu', da qui a dire "va bene" non mi pronuncio

[Ht28]

Originariamente inviato da br1
Hai creato una classe di nome #666666 ?

Se ti funziona non toccarlo piu', da qui a dire "va bene" non mi pronuncio

Ho messo cosi va bene, però c'è ancora una cosa, non so se è il codice o il css,
quando apro il form il numero 60 è formattato giusto, come premo un tasto, il numero 60 perde la formattazione e prende quella della scritta

function conta(el) {
var max_char = 60; // Limite massimo di caratteri consentiti
var conta_caratteri = el.value.length;
if(conta_caratteri >= max_char) {
conta_caratteri = max_char;
el.value = el.value.substring(0, max_char);
}
document.getElementById("Contatore").innerHTML = max_char - conta_caratteri;
if(max_char - conta_caratteri > 50) {  // Da 50 in su il contatore ridiventa #666666
document.getElementById("charCount").className = 'default';
document.getElementById("charCount1").className = 'default';
document.getElementById("Contatore").className = 'default';
}
document.getElementById("Contatore").innerHTML = max_char - conta_caratteri;
if(max_char - conta_caratteri < 50) {  // A 50 caratteri rimanenti il contatore diventa prerosso
document.getElementById("charCount").className = 'prerosso';
document.getElementById("charCount1").className = 'prerosso';
document.getElementById("Contatore").className = 'prerosso';
}
document.getElementById("Contatore").innerHTML = max_char - conta_caratteri;
if(max_char - conta_caratteri < 20) {  // A 20 caratteri rimanenti il contatore diventa rosso
document.getElementById("charCount").className = 'rossi';
document.getElementById("charCount1").className = 'rossi';
document.getElementById("Contatore").className = 'rossi';
}
 }

...

<div id="charCount">Rimanenti</div><span class="formattaNumero"><div id="Contatore">60</div></span>
<div id="charCount1">caratteri</div> 

CSS

#charCount{ 
    width: auto;
    height: auto;
    margin-bottom: 3px;
}

#charCount1{ 
    width: auto;
    height: auto;
    margin-top: 3px;
}

/* Formatta il numero che scala */
.formattaNumero { 
    font-family: arial; color: #004080;
    font-size: 1.2em;
    text-shadow: 0px 1px 0px white;
}

/* Colore di default da 50 in su */
.default {
    color: #666666;
}

/* Formatta da "Rimanenti 50 caratteri" a 20 */
.prerosso {
    color: #a60101;
}

/* Formatta da "Rimanenti 20 caratteri" a 0 */
.rossi {
    color: red;
}