JavaScript: Incrementar e decrementar um valor
Entrando com mais uma dica para os apaixonados por programação, SQN!
Antes que alguém diga: – pra que usar estes códigos, se com HTML 5 temos um novo tipo de input <input type=”number”>. Verdade, temos um input que faz algo parecido ou até melhor, mas tem casos em que queremos um sinal de + e – personalizado, e aí… vai usar plugin!
Vamos ao código:
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <style type="text/css"> a{ text-decoration: none; font-size: 20px; font-weight: bold; padding: 10px; } input{ text-align: center; width: 50px; } </style> <script> function incrementaValor(valorMaximo){ var value = parseInt(document.getElementById('resultado').value,10); value = isNaN(value) ? 0 : value; if(value >= valorMaximo) { value = valorMaximo; }else{ value++; } document.getElementById('resultado').value = value; } function decrementaValor(valorMinimo){ var value = parseInt(document.getElementById('resultado').value,10); value = isNaN(value) ? 0 : value; if(value <= valorMinimo) { value = 0; }else{ value--; } document.getElementById('resultado').value = value; } </script> </head> <body> <a href="#" onclick="decrementaValor(0); return false;">-</a> <input name="resultado" id="resultado" value="0"> <a href="#" onclick="incrementaValor(10);return false;">+</a> </body> </html> |
Clique aqui para ver o código funcionando.
Até a próxima!
E quando os inputs est’a num Array ?
Fala Marcos,
Segue código de exemplo http://jsfiddle.net/linhadecomando/1jhbdy2f/