javascript onclick increment number

Question

With javascript  how can I do it so when i click a form button it adds 1 to a number   The number it increments could be in a form text field or something    Obviously it d be on onclick but I m not sure of the code

User · Answer

In its most basic incarnation    JavaScript    lt script gt      var i   0      function buttonClick             document getElementById  inc   value     i         lt  script gt    Markup    lt button onclick  buttonClick    gt Click Me lt  button gt   lt input type  text  id  inc  value  0  gt  lt  input gt     DEMO

User · Answer

For those who do NOT want an input box  here s a ready-to-compile example you can check out  which just counts the button clicks  updates them in the text and toggles the font  You could take the value and use it anywhere you see fit    lt  DOCTYPE html gt   lt html gt     lt body gt   lt p id  demo  gt JavaScript can change the style of an HTML element  lt  p gt    lt script gt     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                            lt  script gt    lt form gt       lt input type  button  onclick  incrementValue    value  Increment Value    gt   lt  form gt   lt  body gt     lt  html gt

User · Answer

No need to worry for incrementing decrementing numbers using Javascript  Now HTML itself provides an easy way for it    lt input type  number  value  50  gt    It is that simple The problem is that it works fine only in some browsers Mozilla has not yet supported this feature

User · Answer

Simple HTML   Thymeleaf version  Code with Controller  lt form action  quot   quot  method  quot post quot  gt                   lt input type  quot hidden quot  th value  quot   post getId post    quot  name  quot id post quot  gt                   lt input type  quot hidden quot  th value  quot -1 quot  name  quot valueForChange quot  gt                   lt input type  quot submit quot  value  quot - quot  gt   lt  form gt   This is how it looks - look of buttons you can change with style  https   i stack imgur com b97N1 png

User · Answer

I know this is an old post but its relevant to what I m working on currently   What I m aiming to do is create next previous page buttons at the top of a html page  and say I m on  book html   with the current  display  ID content being  page-1 html  through ajax  if i click the  next  button it will load  page-2 html  through ajax  WITHOUT reloading the page    How would I go about doing this through AJAX as I have seen many examples but most of them are completely different  and most examples of using AJAX are for WordPress forms and stuff   Currently using the below line will open the entire page  I want to know the best way to go about using AJAX instead if possible        window location url    I m incorportating the below code as an example   var i   1  var url    pages page-    i     html        function incPage         if  i  lt  10            i            window location   url             load next page in body using AJAX request        else if  i   10            i   0            document getElementById  display   innerHTML   i     function decPage         if  i  gt  0            --i          window location   url             load previous page in body using AJAX request       else if  i   0            i   10            document getElementById  display   innerHTML   i

User · Answer

lt body gt       lt input type  button  value  Increase  id  inc  onclick  incNumber     gt       lt input type  button  value  Decrease  id  dec  onclick  decNumber     gt        lt label id  display  gt  lt  label gt        lt script type  text javascript  gt       var i   0       function incNumber             if  i  lt  10                i              else if  i   10                i   0                    document getElementById  display   innerHTML   i             function decNumber             if  i  gt  0                --i            else if  i   0                i   10                    document getElementById  display   innerHTML   i             lt  script gt   lt  body gt

User · Answer

Yes  You can definitely use onclick or you can also use addEventListener to listen a click event  In this code sample the onclick event is in action use   HTML code   lt div class  quot container quot  gt   lt p gt  lt output id  quot output quot  gt 0 lt  output gt  lt  p gt   lt p gt  lt button type  quot button quot  id  quot btn quot  gt Increment lt  button gt  lt  p gt   lt  div gt   Javascript code   function      var button   document getElementById  quot btn quot    var output   document getElementById  quot output quot    var number  var counter     function init         Convert string to primitve number using parseInt     number   parseInt output innerText             Start counter by adding any number to start counting     In this case the output starts from 0 so to immediately    invoke the button to increment the counter add 1 to start     counting in natural number  counting numbers        counter   number   1      function increment            Increment counter     value   counter       output innerText   value               Output the increment value for every click     button onclick   increment      window onload   init       Demo

User · Answer

jQuery Example  x000D   x000D  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     x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 11 1 jquery min js  gt  lt  script gt   lt input type  text  value  1  class  counter   gt   lt button type  button  class  increment-btn  gt Increment lt  button gt  x000D   x000D   x000D    Plain  JavaScript Example  x000D   x000D  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   x000D   lt input type  text  class  counter  value  1   gt   lt button type  button  class  increment-btn  gt Increment lt  button gt  x000D   x000D   x000D

User · Answer

var i 0   function increment                    i               document getElementById  number   innerHTML i

User · Answer

jQuery Library must be in the head section then    lt button onclick  var less   parseInt     qty   val    - 1      qty   val less    gt  lt  button gt   lt input type  text  id  qty  value  2  gt   lt button onclick  var add   parseInt     qty   val      1      qty   val add    gt   lt  button gt

User · Answer

Check this out   x000D   x000D  var timeout    function mouseDown i       value   isNaN parseInt document getElementById  xxxx   value     0   parseInt document getElementById  xxxx   value     document getElementById  xxxx   value   value   1      timeout    setTimeout function     mouseDown i       150      function mouseDown d       value   isNaN parseInt document getElementById  xxxx   value     0   parseInt document getElementById  xxxx   value     value - 1  lt   0   document getElementById  xxxx   value        document getElementById  xxxx   value   value - 1      timeout    setTimeout function     mouseDown d       150      function mouseUp     clearTimeout timeout       function mouseLeave     clearTimeout timeout      x000D   lt p onmousedown  mouseDown i    onmouseup  mouseUp    onmouseleave  mouseLeave    gt Click to INCREMENT  lt  p gt   lt p onmousedown  mouseDown d    onmouseup  mouseUp    onmouseleave  mouseLeave    gt Click to DECREMENT  lt  p gt   lt input id  xxxx  type  text  value  0  gt  x000D   x000D   x000D

User · Answer

Since you gave me nothing to start on  here is a simple example   jsFiddle  Example implementation   function incrementValue         var value   parseInt document getElementById  number   value  10       value   isNaN value    0   value      value        document getElementById  number   value   value      Example Html   lt form gt      lt input type  text  id  number  value  0   gt      lt input type  button  onclick  incrementValue    value  Increment Value    gt   lt  form gt

[javascript] javascript onclick increment number

Examples related to javascript

Examples related to onclick

Examples related to numbers