CODEWITHSUNDEEP
javascriptjqueryhtml
Nancy256
Nancy256

Reputation: 53

How To make the input add values every time the button is clicked in jquery?

I got buttons to click , and when its clicked i want the value to be incremented by the same value that is being clicked; here is my html

          <div  id="setTimer">
                <div class="spans">
                  <span   class="timeSet" >1</span>
                  <span  class="timeSet">2</span>
                  <span  class="timeSet">3</span>
                  <span  class="timeSet">4</span>
                </div>
                <div class="spans">
                    <span  class="timeSet">5</span>
                   <span  class="timeSet">6</span>
                   <span  class="timeSet">7</span>
                   <span  class="timeSet">8</span>
                </div>
                <div class="spans">
                    <span  class="timeSet">9</span>
                    <span  class="timeSet">0</span>
                    <span  class="timeSet">+30s</span>
                </div>             
            </div>

javascript

$(document).ready(function(){
        var count = 0
        var btnCountOutput = $('#btnCountOutput');
    var txt = $(this);
    $('.timeSet').click(function(txt){
        count++;
        if(count > 3){
            console.log('that cant be done!');
            return false;
        }
        var output = txt.currentTarget.innerHTML;
        output++;
        var num = parseFloat(output);
        var inputOut = btnCountOutput.val(num);
        console.log(num);
        console.log(count);
    });
});

Html for the output

<div class="timeCount">
    <input type="text" placeholder="Buttonclick Counter" class="col" 
     id="btnCountOutput">

CSS if needed

#setTimer .spans{
margin-bottom: 10px;
  }
 #setTimer span{
   width: 15px;
   height: 10px;
   border-radius:50%;
   background: white;
   text-align: center;
   padding: 4px;
   cursor: pointer;
}

well , just like Java Script where i could just write;

  btnCountOutput.value += num;

That every time the button is clicked , just add on the output any value that is clicked

Upvotes: 1

Views: 927

Answers (1)

mwilson
mwilson

Reputation: 12900

You need to grab the value of the text box then add it to the number you pass in. After the addition happens, you can then set the value of the text box again. I added a variable called currentCount as an example:

https://jsfiddle.net/mswilson4040/487eaopt/

$(document).ready(function() {
  var count = 0
  var btnCountOutput = $('#btnCountOutput');
  var txt = $(this);
  $('.timeSet').click(function(txt) {
    count++;
    if (count > 3) {
      console.log('that cant be done!');
      return false;
    }
    var output = txt.currentTarget.innerHTML;
    output++;
    var num = parseFloat(output);
    var currentCount = btnCountOutput.val(); // Grab the current value
    var inputOut = btnCountOutput.val(+num + +currentCount); // Add the two values together and set the text box (make sure to convert string to number)
    console.log(num);
    console.log(count);
  });
});

You also don't need your parseFloat function. You do need some function to make sure you're string gets converted to a number, but you want either Number, parseInt, or +. parseFloat isn't needed unless you'll be working with decimal values.

Upvotes: 1

Related Questions