How to make an input increment or decrement numbers with javascript

Asked

Viewed 3,105 times

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

  • @Marceloboni input type is set as number type, as can be seen in the code.

  • I still don’t understand the need for buttons... look at the native behavior of input type number: https://i.stack.Imgur.com/Mxtre.gif

  • 1

    Yes @Marceloboni I know there are native buttons for inputs with type number, but it would not be cool to develop a site all worked in ui/ux with amazing design and leave the input buttons of a request for example with default buttons right?!

  • You can customize the Arrows using css

  • Yes, but it’s like the customer he wants the input in the middle and the buttons on each side.

  • If my answer is helpful, please accept it as an answer to your question!

  • How do I say this @Virgilionovic ???

  • Below the syringe that points down there is a check just click on top.

Show 3 more comments

1 answer

1


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>
<link rel="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>

  • 2

    Thank you very much @Virgilionovic very good your code.

Browser other questions tagged javascript html

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