1

Tenho um input de number e gostaria que quando o usuario inserir um valor ele faça uma soma de adição com um valor pré-definido por uma variável e mostre o resultado usando InnerHtml(pois preciso de valor modificado dentro de uma div:

Exemplo:

        <input id="input-currency" required type="number" class="Input Input-currency Input--noSpinner" min="0.00" max="100000" step="500" value="10000" maxlength="7" data-number='{"toFixed":2,"stepfactor":10000}' />
        
        
  <div class="resultado_1"> somado com: 1.4% </div>
   <div class="resultado_2"> somado com: 2.5% </div>   
 <div class="resultado_3">  somado com: 1.3% </div>
  <div class="resultado_4">  somado com: 1.87% </div>
  
   <div class="resultado_5">  somado com: 1.6% </div>

1 Resposta 1

2

Você pode utilizar o evento de mudança do input (change), ficaria da seguinte forma:

var porcentagemUm = 1.4;
var porcentagemDois = 2.5;
var porcentagemTres = 1.3;
var porcentagemQuatro = 1.87;
var porcentagemCinco = 1.6;


document.querySelector('#input-currency').addEventListener('change',function(element){
    let value = parseInt(element.target.value);
    
    if(!!value) {
      document.querySelector('.resultado_1 b').innerHTML = (value + (value * (porcentagemUm / 100))).toFixed(2);

      document.querySelector('.resultado_2 b').innerHTML = (value + (value * (porcentagemDois / 100))).toFixed(2);

      document.querySelector('.resultado_3 b').innerHTML = (value + (value * (porcentagemTres / 100))).toFixed(2);

      document.querySelector('.resultado_4 b').innerHTML = (value + (value * (porcentagemQuatro / 100))).toFixed(2);

      document.querySelector('.resultado_5 b').innerHTML = (value + (value * (porcentagemCinco / 100))).toFixed(2);
    } else {
      document.querySelector('.resultado_1 b').innerHTML = '';
      document.querySelector('.resultado_2 b').innerHTML = '';
      document.querySelector('.resultado_3 b').innerHTML = '';
      document.querySelector('.resultado_4 b').innerHTML = '';
      document.querySelector('.resultado_5 b').innerHTML = '';
    }
    
    
    
});
<input id="input-currency" required type="number" class="Input Input-currency Input--noSpinner" min="0.00" max="100000" step="500" value="" maxlength="7" data-number='{"toFixed":2,"stepfactor":10000}' />
        
        
<div class="resultado_1">somado com: 1.4% <b></b> </div>
<div class="resultado_2">somado com: 2.5% <b></b> </div>   
<div class="resultado_3">somado com: 1.3% <b></b> </div>
<div class="resultado_4">somado com: 1.87% <b></b> </div>
<div class="resultado_5">somado com: 1.6% <b></b> </div>

2
  • Exatamente isso Vinicius! Muito obrigado! Só mais uma coisa, para eu deixar um valor já inicial no Input exemplo: 10.000, eu tenho que criar uma variavel e atribuir esse valor ao input? Commented 9/05/2019 às 14:57
  • @OgaitEuqireh você pode tornar esse calculo dentro de uma função que recebe o valor do input como parâmetro, e assim que o js carregar você chama essa função passando o valor inicial do input. Commented 9/05/2019 às 17:00

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 .