the counter needs to turn red when i reach 10 characters. When i reach 10 characters, i have to press any button again in order for the counter to turn red. When i delete the characters, the counter remains red instead of going back to black.
<script>
function ceScriu(){
var numeInput = document.querySelector("[name='nume']");
var nume = numeInput.value;
var nu = nume.toString().toLowerCase();
var divInput = document.querySelector("[name='divul']");
var div = nu.length;
document.querySelector("[name='divul']").innerHTML = div;
numeInput.onkeypress = function(){
if(div === 10){
event.preventDefault();
divInput.classList.add("counter");
}else{
divInput.classList.remove("counter");
}
}
}
</script>
I want the counter to turn red when i enter the 10th character and i want the counter to turn back to black when i start deleting characters after i reached the 10th.
Thank you for all your answers. Some of them were of help and led me to this result. It seems that all i needed to do was just add 2 more IF statements. I'm adding the code here.
function ceScriu(){
var numeInput = document.querySelector("[name='nume']");
var nume = numeInput.value;
var nu = nume.toString().toLowerCase();
var divInput = document.querySelector("[name='divul']");
var div = nu.length;
document.querySelector("[name='divul']").innerHTML = div;
numeInput.onkeypress = function(){
if(div >9){
event.preventDefault();
}else{
divInput.classList.remove("counter");
}
}
if(div<10){
divInput.classList.remove("counter");
}
if(div>9){
document.querySelector("[name='divul']").classList.add("counter");
}
}