How to clear an "invalid" field

Asked

Viewed 95 times

0

I have an input that only appears before a condition, but when it runs the script is run again and the condition is invalid, the input keeps appearing, I’ll probably have to create another Function, but I have no idea what to put, I’m beginner in javascript and html, nor knew how to look for it right, but I did not find anything like, follow the javascript:

document.addEventListener('keypress', function(e){
if(e.which == 13){
calcular();
}
}, false);
function ocultar(){
document.getElementById("val").style.display = "none";
document.getElementById("p2").style.display = "none"
document.getElementById("lblp2").style.display = "none";
document.getElementById("p3").style.display = "none"
document.getElementById("lblp3").style.display = "none";

}
function calcular() {

 document.getElementById("p2").style.display = "none";
 document.getElementById("p2").style.display = "block";
 document.getElementById("lblp2").style.display = "none";
 document.getElementById("lblp2").style.display = "block";
 form.res.value = (form.valor1.value*1) - (form.valor2.value*1);
 form.val.value = (form.res.value*1) /200;

 if(form.val.value>=2 && form.val.value<=2.9){
 form.parcela.value = (form.res.value*1) /2;
 document.getElementById("p2").style.display = "block";
 document.getElementById("lblp2").style.display = "block";
 }
 else if(form.val.value>=3){
 form.parcela.value = (form.res.value*1) /2;
 form.parcela3.value = (form.res.value*1) /3;
 document.getElementById("p2").style.display = "block";
 document.getElementById("lblp2").style.display = "block";
 document.getElementById("p3").style.display = "block";
 document.getElementById("lblp3").style.display = "block";
 }
 else{
 document.getElementById("p2").style.display = "none"
 document.getElementById("lblp2").style.display = "none";
 document.getElementById("p3").style.display = "none"
 document.getElementById("lblp3").style.display = "none";
 }
 }

html:

<body onload="ocultar()">



<form name="form">
<fieldset>
  <legend>Calculadora de pre&ccedil;o</legend>

  <label for="valor1">Valor da pe&ccedil;a <strong></strong>:</label> 
  <input value="0" type="number" name="valor1" id="valor1"          
        onfocus="javascript:(this.value=='0'?this.value = '':null);" 
        onblur="javascript:(this.value==''?this.value = '0':null);"/>


  <label for="valor2">Desconto <strong></strong>:</label> 
  <input value="0" type="number" name="valor2" id="valor2"
        onfocus="javascript:(this.value=='0'?this.value = '':null);" 
        onblur="javascript:(this.value==''?this.value = '0':null);"/>

  <label for="res">Valor final:</label>
  <input type="number" name="res" readonly />
  <label  id="lblp2" for="parcela">Duas parcelas:</label>
  <input type="number" id="p2" name="parcela" readonly />
  <input type="number" id="val"  name="val" readonly />
  <label  id="lblp3" for="parcela3">Tr&ecirc;s parcelas:</label>
  <input type="number" id="p3" name="parcela3" readonly />

  <input type="button" value="Calcular" class="botao" onclick="calcular()" />
  </fieldset>
  </form>

  </body>
javascript html5

  • I suggest you save the html of inputs in variables, it makes the code cleaner and clear

  • @Guilhermecostamilam would look like var value 1 = form.valor1.value;?

  • Poor beginner... I understand.

  • Be sure to read this posthttps://en.meta.stackoverflow.com/questions/1078/how-to-what-to-accept-a-reply/1079#1079

  • No, it would be something like that var input1 = document.getElementById("input1"), to change your call style input1.style..., to pick up your call value input1.value. From a search also on the keyword let

1 answer

0


In your script in condition if(form.val.value>=2 && form.val.value<=2.9){ for the input not to appear you have to put these two lines

 document.getElementById("p3").style.display = "none";
 document.getElementById("lblp3").style.display = "none";

In the else if it is without plots, form.res.value

Below reworked script

document.addEventListener('keypress', function(e){
if(e.which == 13){
calcular();
}
}, false);
function ocultar(){
document.getElementById("val").style.display = "none";
document.getElementById("p2").style.display = "none"
document.getElementById("lblp2").style.display = "none";
document.getElementById("p3").style.display = "none"
document.getElementById("lblp3").style.display = "none";

}
function calcular() {
 //linhas desnecessarias
 //document.getElementById("p2").style.display = "none";
 //document.getElementById("p2").style.display = "block";
 //document.getElementById("lblp2").style.display = "none";
 //document.getElementById("lblp2").style.display = "block";

var res = (form.valor1.value) - (form.valor2.value);
var val = (res /200);

console.log(val);

 if(val>=2 && val<3){
 form.parcela.value = res/2;
 document.getElementById("p2").style.display = "block";
 document.getElementById("lblp2").style.display = "block";

 //adicionadas para remover quando há somente 2 parcelas
 document.getElementById("p3").style.display = "none";
 document.getElementById("lblp3").style.display = "none";
 }
 else if(val>=3){
 form.parcela.value = res/2;
 form.parcela3.value = res /3;
 document.getElementById("p2").style.display = "block";
 document.getElementById("lblp2").style.display = "block";
 document.getElementById("p3").style.display = "block";
 document.getElementById("lblp3").style.display = "block";
 }
 else{
 form.res.value = res;
 document.getElementById("p2").style.display = "none"
 document.getElementById("lblp2").style.display = "none";
 document.getElementById("p3").style.display = "none"
 document.getElementById("lblp3").style.display = "none";
 }
 };
 //fora da tag body mas pode chamar nela 
 ocultar();
<form name="form">

<label for="valor1">Valor da pe&ccedil;a <strong></strong>:</label> 
  <input value="0" type="number" name="valor1" id="valor1"          
        onfocus="javascript:(this.value=='0'?this.value = '':null);" 
        onblur="javascript:(this.value==''?this.value = '0':null);"/>


  <label for="valor2">Desconto <strong></strong>:</label> 
  <input value="0" type="number" name="valor2" id="valor2"
        onfocus="javascript:(this.value=='0'?this.value = '':null);" 
        onblur="javascript:(this.value==''?this.value = '0':null);"/>

  <label for="res">Valor final:</label>
  <input type="number" name="res" readonly />
  <label  id="lblp2" for="parcela">Duas parcelas:</label>
  <input type="number" id="p2" name="parcela" readonly />
  <input type="number" id="val"  name="val" readonly />
  <label  id="lblp3" for="parcela3">Tr&ecirc;s parcelas:</label>
  <input type="number" id="p3" name="parcela3" readonly />

  <input type="button" value="Calcular" class="botao" onclick="calcular()" />

  </form>

For decimal values above 2 digits I used the function ajuste to present split values to 2 decimal places without rounding.

function ajuste(nr, casas) {
  const og = Math.pow(10, casas)
  return Math.floor(nr * og) / og;
}

document.addEventListener('keypress', function(e){
if(e.which == 13){
calcular();
}
}, false);
function ocultar(){
document.getElementById("val").style.display = "none";
document.getElementById("p2").style.display = "none"
document.getElementById("lblp2").style.display = "none";
document.getElementById("p3").style.display = "none"
document.getElementById("lblp3").style.display = "none";

}
function calcular() {
 //linhas desnecessarias
 //document.getElementById("p2").style.display = "none";
 //document.getElementById("p2").style.display = "block";
 //document.getElementById("lblp2").style.display = "none";
 //document.getElementById("lblp2").style.display = "block";

var res = (form.valor1.value) - (form.valor2.value);
var val = (res /200);

 if(val>=2 && val<3){
 form.parcela.value = ajuste((res/2),2);

 document.getElementById("p2").style.display = "block";
 document.getElementById("lblp2").style.display = "block";

 //adicionadas para remover quando há somente 2 parcelas
 document.getElementById("p3").style.display = "none";
 document.getElementById("lblp3").style.display = "none";
 }
 else if(val>=3){
 form.parcela.value = ajuste((res/2),2);
 form.parcela3.value = ajuste((res/3),2);

 document.getElementById("p2").style.display = "block";
 document.getElementById("lblp2").style.display = "block";
 document.getElementById("p3").style.display = "block";
 document.getElementById("lblp3").style.display = "block";
 }
 else{
 form.res.value = res;
 document.getElementById("p2").style.display = "none"
 document.getElementById("lblp2").style.display = "none";
 document.getElementById("p3").style.display = "none"
 document.getElementById("lblp3").style.display = "none";
 }
 };
 //fora da tag body mas pode chamar nela 
 ocultar();
<form name="form">

<label for="valor1">Valor da pe&ccedil;a <strong></strong>:</label> 
  <input value="0" type="number" name="valor1" id="valor1"          
        onfocus="javascript:(this.value=='0'?this.value = '':null);" 
        onblur="javascript:(this.value==''?this.value = '0':null);"/>


  <label for="valor2">Desconto <strong></strong>:</label> 
  <input value="0" type="number" name="valor2" id="valor2"
        onfocus="javascript:(this.value=='0'?this.value = '':null);" 
        onblur="javascript:(this.value==''?this.value = '0':null);"/>

  <label for="res">Valor final:</label>
  <input type="number" name="res" readonly />
  <label  id="lblp2" for="parcela">Duas parcelas:</label>
  <input type="number" id="p2" name="parcela" readonly />
  <input type="number" id="val"  name="val" readonly />
  <label  id="lblp3" for="parcela3">Tr&ecirc;s parcelas:</label>
  <input type="number" id="p3" name="parcela3" readonly />

  <input type="button" value="Calcular" class="botao" onclick="calcular()" />

  </form>

  • worked, I just didn’t understand why of var val = fit((res /200),2); because it has this ",2" there?

  • @William edited the answer.

  • this 2 is for 2 decimal places

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.