Change cents of values

Navigation
5

I'd like to be able to change the cents of li by the input of MudarCentavos . But by setting Id in li and treating Id by Id , because this list will be dynamic, then more than 3 values may come.

Note: 2 Decimal places 

function MudarCentavos() {
  var getCentavos = document.getElementById('getCentavos').value
  console.log(getCentavos)
}
<label>Mudar centavos</label>
<input type="text" maxlength="2" pattern="([0-9]|[0-9]|[0-9])" id="getCentavos">
<button onclick="MudarCentavos()">Submit</button>

<ul>
  <li>24.50</li>
  <li>10.2</li>
  <li>43</li>
</ul>

Example

If I put in the input 99 and give Submit , the output of the values will be: 

  24.99
  10.99
  43.99

Thank you!

    
asked by anonymous 05.12.2017 / 12:18

2 answers

8

I think you can do it like this: 

jQuery(document).ready(function() {
   $('#mudarCentavos').click(function(){
       // Recebe o valor input
       var centavos = document.getElementById('getCentavos').value
 
       // Percorre todas as <li> da <ul> com o ID #valores
       $('#valores li').each(function( index, value ){
           var novo_valor = Math.trunc( parseFloat( $(value).text() ) ); // paseFloat vai converter o valor para o tipo float, já a função Math.trunc retorna somente a parte inteira de um número, ou seja, ela descarta as casas decimais.
           novo_valor = novo_valor + ( centavos / 100 ); // Soma o valor atual com os centavos informados no input
           $(value).html( novo_valor.toFixed(2) ); // a função toFizex converte um número em string mas mantendo a quantidade de casas decimais que você informar.
       });
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><label>Mudarcentavos</label><inputtype="text" maxlength="2" pattern="([0-9]|[0-9]|[0-9])" id="getCentavos">
<button id="mudarCentavos">Submit</button>

<ul id="valores">
   <li>24.50</li>
   <li>10.2</li>
   <li>43</li>
</ul>
    
05.12.2017 / 12:53
1

With pure javascript, using the Math.trunc

  

The Math.trunc () method returns the integer part of a number, discarding its decimal places. 

function MudarCentavos() {
    var x = document.getElementsByTagName("UL")[0].getElementsByTagName("LI");
    
     var centavos = document.getElementById('getCentavos').value
    
     var list = document.getElementsByTagName("UL")[0];
     
     for (i = 0; i < x.length; i++) { 
        var novo_valor = Math.trunc( document.getElementsByTagName("li")[i].innerHTML );
        novo_valor = novo_valor + ( centavos / 100 );
    	list.getElementsByTagName("LI")[i].innerHTML = novo_valor;
     }
}
<label>Mudar centavos</label>
<input type="text" maxlength="2" pattern="([0-9]|[0-9]|[0-9])" id="getCentavos">
<button onclick="MudarCentavos()">Submit</button>

<ul>
  <li>24.50</li>
  <li>10.2</li>
  <li>43</li>
</ul>
    
05.12.2017 / 13:41
Execution of programs in halt WITHOUT use of Threads Removal of excess white space