How to clean an "invalid"

Question

How to clean an "invalid"

Navigation

#1 by (0 votes)

0

I have an input that only appears in front of a condition, but when the script is run again and the condition is invalid, the input continues to appear, I'll probably have to create another function, but I have no idea what I'm new to javascript and html, I did not know how to look for it right, but I did not find anything like it, it follows 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

asked by anonymous 30.04.2018 / 05:22

1 answer

Trying to get property 'logo' of non-object in on line 18 Error: java: Illegal char:

score 0 · Accepted Answer

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

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

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

Below rewritten 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 values with decimals above 2 digits I used the ajuste function to display the split values with 2 decimals 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>