5

Eu gostaria de conseguir mudar os centavos dos li pelo input de MudarCentavos. Mas não setando Id nos li e ir tratando Idpor Id, porque essa lista será dinâmica, então podem vir mais do que 3 valores.

Obs: 2 Casas decimais

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>

Exemplo

Se eu colocar no input 99 e der o Submit, o output dos valores será:

  24.99
  10.99
  43.99

Obrigado!

2
  • 1
    Pode ser mais específico? em 'mudar os centavos dos p', aonde tem p? ao mudar você quer zerar todos os centavos e ir adicionando os novos? quer somente substituir pelo input ? Commented 5/12/2017 às 11:30
  • @Felipe Confundi a tag, é o li. não tem p... vou atualizar a pergunta com um exemplo de como gostaria =)
    – Jackson
    Commented 5/12/2017 às 11:51

2 Respostas 2

7

Acho que você pode fazer da seguinte forma:

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>

6
  • 1
    ele quer mudar os centavos e não somar
    – user60252
    Commented 5/12/2017 às 11:59
  • 1
    é verdade @LeoCaracciolo tinha entendido errado, mas já corrigir a função.
    – Kayo Bruno
    Commented 5/12/2017 às 12:06
  • Excelente!! Muito obrigado!!! :)
    – Jackson
    Commented 5/12/2017 às 12:14
  • 1
    explicar o que foi feito é sempre interessante
    – user60252
    Commented 5/12/2017 às 12:14
  • Eu entendi. Dei uma googlada no Math.trunc(), Mas algum outro pode não entender de primeira :)
    – Jackson
    Commented 5/12/2017 às 12:14
3

Com javascript puro, fazendo uso do método Math.trunc

O método Math.trunc() retorna a parte inteira de um número, descartando suas casas decimais.

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>

2
  • Só funcionou na primeira <ul>.
    – Kayo Bruno
    Commented 5/12/2017 às 18:15
  • Show cara, obrigado!
    – Jackson
    Commented 6/12/2017 às 18:26

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 .