Change pennies of values

Asked

Viewed 111 times

5

I wish I could change the pennies of li by input of MudarCentavos. But not setando Id us li and get treated Idfor Id, because this list will be dynamic, so can come more than 3 values.

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 input 99 and give the Submit, the output of the values shall be:

  24.99
  10.99
  43.99

Thank you!

javascript
  • 1

    Can you be more specific? In 'change the cents of the p', where has p? when changing you want to zero all the cents and go adding the new ones? wants to replace only by input ?

  • @Felipe Mistaken the tag, is the li. has not p... I will update the question with an example of how you would like it =)

2 answers

7


I think you can do it this way:

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>Mudar centavos</label>
<input type="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>

  • 1

    he wants to change the pennies and not add up

  • 1

    it is true @Leocaracciolo had misunderstood, but already fix the function.

  • Excellent!! Thank you very much!!! :)

  • 1

    explain what was done is always interesting

  • I got it. I googlada Math.trunc(), But some other may not understand at first :)

  • Not at all @Jackson!

Show 1 more comment

3

With pure javascript, making use of the method Math.trunc

The Math.trunc() method returns the entire 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>

  • It only worked at first <ul>.

  • Show man, thank you!

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.