All geek questions in one place

Javascript onclick increment number

With javascript, how can I do this, when I click the form button, it adds 1 to the number? The number that it increases may be in the text box of the form or something like that.

Obviously it will be enabled onclick, but I'm not sure about the code.

+5
source share
8 answers

Since you did not give me anything to start, here is a simple example.

jsFiddle

Implementation Example:

function incrementValue() { var value = parseInt(document.getElementById('number').value, 10); value = isNaN(value) ? 0 : value; value++; document.getElementById('number').value = value; }

Html example

 <form> <input type="text" id="number" value="0"/> <input type="button" onclick="incrementValue()" value="Increment Value" /> </form>
+27
source

In its very embodiment.

JavaScript:

 <script> var i = 0; function buttonClick() { document.getElementById('inc').value = ++i; } </script>

Markup:

 <button onclick="buttonClick()">Click Me</button> <input type="text" id="inc" value="0"></input>
+8
source

JQuery example

 var $button = $('.increment-btn'); var $counter = $('.counter'); $button.click(function(){ $counter.val( parseInt($counter.val()) + 1 ); // `parseInt` converts the `value` from a string to a number }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <input type="text" value="1" class="counter"/> <button type="button" class="increment-btn">Increment</button>

Normal JavaScript Example

 var $button = document.querySelector('.increment-btn'); var $counter = document.querySelector('.counter'); $button.addEventListener('click', function(){ $counter.value = parseInt($counter.value) + 1; // `parseInt` converts the `value` from a string to a number }, false); 
 <input type="text" class="counter" value="1"/> <button type="button" class="increment-btn">Increment</button>
+7
source

No need to worry about increasing / decreasing the number using Javascript. Now HTML itself provides an easy way for it.

 <input type="number" value="50">

It is so simple. The problem is that it only works fine in some browsers. Mozilla has not yet supported this feature.

+1
source 
 <body> <input type="button" value="Increase" id="inc" onclick="incNumber()"/> <input type="button" value="Decrease" id="dec" onclick="decNumber()"/> <label id="display"></label> <script type="text/javascript"> var i = 0; function incNumber() { if (i < 10) { i++; } else if (i = 10) { i = 0; } document.getElementById("display").innerHTML = i; } function decNumber() { if (i > 0) { --i; } else if (i = 0) { i = 10; } document.getElementById("display").innerHTML = i; } </script> </body>
+1
source

For those who DO NOT need an input block, here is an example ready for compilation that you can check, which simply counts the button presses, updates them in the text and switches the font. You can take the value and use it anywhere.

 <!DOCTYPE html> <html> <body> <p id="demo">JavaScript can change the style of an HTML element.</p> <script> function incrementValue() { var demo_id = document.getElementById('demo') var value = parseInt(demo_id.value, 10); // if NaN, set to 0, else, keep the current value value = isNaN(value) ? 0 : value; value++; demo_id.value = value; if ((value%2)==0){ demo_id.innerHTML = value; demo_id.style.fontSize = "25px"; demo_id.style.color = "red"; demo_id.style.backgroundColor = "yellow"; } else { demo_id.innerHTML = value.toString() ; demo_id.style.fontSize = "15px"; demo_id.style.color = "black"; demo_id.style.backgroundColor = "white"; } } </script> <form> <input type="button" onclick="incrementValue()" value="Increment Value" /> </form> </body> </html>
0
source 
 var i=0; function increment() { i++; document.getElementById('number').innerHTML=i; }
0
source

The jQuery library should be in the header section.

 <button onclick="var less = parseInt($('#qty').val()) - 1; $('#qty').val(less);"></button> <input type="text" id="qty" value="2"> <button onclick="var add = parseInt($('#qty').val()) + 1; $('#qty').val(add);">+</button>
-2
source

Source: https://habr.com/ru/post/1395333/

More articles:


All Articles