How to make an input increment or decrement numbers with javascript

Question

How to make an input increment or decrement numbers with javascript

Navigation

#1 by (1 votes)

1

function Num() {
  var numero = document.getElementById('num');
  numero = 0;

  document.getElementById('menos').click(function() {
    numero--;
  });
  document.getElementById('mais').click(function() {
    numero++;
  });
}

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <button type="button" id="menos" onclick="Num()"><i class="fa fa-minus-circle"aria-hidden="true"></i></button> &nbsp; <input type="number" name="numero" id="num" oninput="Num()"> &nbsp; <button type="button" id="mais" onclick="Num()"><i class="fa fa-plus-circle" aria-hidden="true"></i></button>
    </div>
  </div>
</div>

javascript html

asked by anonymous 11.07.2017 / 22:10

1 answer

preg_match regular expression to get text between tags Concatenate variables in Jquery to send to php only the selected record

score 1 · Accepted Answer

numero = 0;

function less() {
  numero--;
  setValue(numero);
}

function more() {
  numero++;
  setValue(numero);
}

function setValue(value) {
  document.getElementById('num').value = value;
}

setValue(numero);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <button type="button" id="menos" onclick="less()"><i class="fa fa-minus-circle"aria-hidden="true">-</i></button> &nbsp; <input type="number" name="numero" id="num"> &nbsp; <button type="button" id="mais" onclick="more()">+<i class="fa fa-plus-circle" aria-hidden="true"></i></button>
    </div>
  </div>
</div>