0

tenho um input que só aparece diante a uma condição, mas quando roda o script é rodado novamente e a condição for invalida, o input continua aparecendo, eu provavelmente vou ter que criar outra function, mas eu não faço nem ideia do que colocar, eu sou iniciante em javascript e html, nem sabia como procurar isso direito, mas eu não achei nada parecido, segue o 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>
5
  • Sugiro que guarde o html dos inputs em variáveis, isso deixa o código mais limpo e claro
    – Costamilam
    30/04/2018 às 12:30
  • @GuilhermeCostamilam ficaria tipo var valor 1 = form.valor1.value;?
    – Guilherme
    30/04/2018 às 12:37
  • Pobre iniciante...Eu entendo.
    – Lollipop
    30/04/2018 às 13:51
  • Não deixe de ler esse posthttps://pt.meta.stackoverflow.com/questions/1078/como-e-por-que-aceitar-uma-resposta/1079#1079
    – user60252
    30/04/2018 às 14:15
  • Não, seria algo assim var input1 = document.getElementById("input1"), para mudar seu estilo chame input1.style..., para pegar o seu valor chame input1.value. De uma pesquisada também sobre a palavra chave let
    – Costamilam
    30/04/2018 às 14:20

1 Resposta 1

0

No seu script na condição if(form.val.value>=2 && form.val.value<=2.9){ para o input não aparecer tem que colocar essas duas linhas

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

No else falta apresentar o valor, no caso de ser sem parcelas, form.res.value

Abaixo script reformulado

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>

Para valores com decimais acima de 2 algarismos utilizei a função ajuste para apresentar os valores parcelados com 2 decimais sem arredondamento.

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>

3
  • funcionou, eu só não entendi o porque de var val = ajuste((res /200),2); porque tem esse ",2" ali?
    – Guilherme
    30/04/2018 às 14:23
  • @Guilherme editei a resposta.
    – user60252
    30/04/2018 às 15:06
  • esse 2 é para 2 casas decimais
    – user60252
    30/04/2018 às 15:12

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .