Effect with JavaScript

2

Good evening, everyone. I am writing a script in which it has the function of multiplying the value typed in inputs and give me the result that I want to know.

How do I type when I type, for example: 100,00 , it gives me the value and draws an image below the input "result".

I'll set up the 50x50 image that will be hidden, type:

<img src="teste.jpg" style="display:none"> 

Then I'll put the value from 90 to 100, and when I type between those values will call this image "test.jpg" below input .

I already tried with if{}else{} . If anyone can help me, I will be very grateful.

This is the code:

<html>
<head>
    <meta charset="utf-8">
    <style>
        #demo3 { display: none;}
        #resultado {margin-left: 500px;}
    </style>
</head>
   <body>
   <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.maskMoney.js" type="text/javascript"></script>
<script> 
function soma() 
{
    var valor;
    var campo = form.campo1.value;
    if(campo >=1  && campo < 99){
        valor=23;
    }else{
        valor=25;
    }
    form.campo4.value = parseInt(campo) * parseInt(valor) 
}

  function limitarInput(obj) {
    obj.value = obj.value.substring(0,8);
  }
</script>
<form name="form">
<input name="campo1" id="demo4"><br> 
<input name="campo2" value="" id="demo3"><br>  
<input name="campo4" readonly id="resultado"><br>
<input type="button" onclick="soma()" value="CALCULAR">
</form>
<img src="teste.jpg" style="display:none">
   </body>
</html>
    
asked by anonymous 05.10.2017 / 23:56

1 answer

2

If I understood your question well, just change the display of the image when the values meet the suggested criteria, using if .

Note: It's important to assign a id to the image to make it easier to manipulate:

<img id="imagem" src="teste.jpg" style="display:none">

So, just add if to your function soma() :

if(campo >= 90 && campo <= 100){
    // torno o valor display da imagem vazio, assim ela será exibida
    document.getElementById("imagem").style.display = "";
}

function soma() 
{
    var valor;
    var campo = form.campo1.value;
    if(campo >=1  && campo < 99){
        valor=23;
    }else{
        valor=25;
    }
	
if(campo >= 90 && campo <= 100){
	document.getElementById("imagem").style.display = "";
}
    form.campo4.value = parseInt(campo) * parseInt(valor) 
}

  function limitarInput(obj) {
    obj.value = obj.value.substring(0,8);
  }
<form name="form">
<input name="campo1" id="demo4"><br> 
<input name="campo2" value="" id="demo3"><br>  
<input name="campo4" readonly id="resultado"><br>
<input type="button" onclick="soma()" value="CALCULAR">
</form>
<img id="imagem" src="https://d30y9cdsu7xlg0.cloudfront.net/png/76060-200.png"style="display:none">
    
06.10.2017 / 00:37