CODEWITHSUNDEEP
javascriptjquery
Nancy256
Nancy256

Reputation: 53

How to make a number add on it'self and return the total every time the button is clicked?

i got the buttons that when cllicked they return the current and add on that very number, well that works fine but the button with 30 i want to return 30 on first output and when clciked again to add on 30 again thus output being 60 , 90 , 120 .......

HTML

  <button data-value="1" class="numbs">1</button>
  <button type="button" data-value="2" class="numbs">2</button>
  <button type="button" data-value="3" class="numbs">3</button>
  <button type="button" data-value="4" class="numbs">4</button>
  <button type="button" data-value="30" class="numb">+30s</button>
  <input type="number" min="1" id="inputOutput">

JS / JQUERY

$(document).ready(function(){
   $('.numbs').click(function add(ev){
         var values =  ev.currentTarget.dataset.value;       
          console.log(values);
           var inputOutput = $('#inputOutput');
           var current = inputOutput.val();
           inputOutput.val(current + values);
           ev.stopPropagation();
       });
//for +30s button
 var $_30sec = $('.numb');
       var num ;
       var x  = 30;        
       $_30sec.click(function addthithy(ev){
            num = ev.currentTarget.dataset.value;
           var total  = Math.floor(num)+Math.floor(30);
           var inputOutput = $('#inputOutput');
//this prints out 30 only;
           var current = inputOutput.val(num);
          // console.log(num);
//this prints out 60 only;
          inputOutput.val(total);
           console.log(total);
       });
});

i actaully dont know how to do that for the increment to be add on 30 everytime the button is clicked; am sorry in advance if the question was asked before but have searched everywhere couldn't find what i need to do;

Upvotes: 0

Views: 44

Answers (1)

Uttam Gupta
Uttam Gupta

Reputation: 518

update your code with below code 

$(document).ready(function () {

        $('.numbs').click(function add(ev) {

            var values = ev.currentTarget.dataset.value;
            console.log(values);
            var inputOutput = $('#inputOutput');
            var current = inputOutput.val();
            inputOutput.val(current + values);
            ev.stopPropagation();

        });
        //for +30s button
        var $_30sec = $('.numb');
        var num;
        var x = 30;
        $_30sec.click(function addthithy(ev) {
            var inputOutput = $('#inputOutput');
            var clickCount = $(this).attr('click-count');
            inputOutput.val(parseInt(clickCount) * 30);
            var newClickCount = parseInt(clickCount) + 1;
            $(this).attr('click-count', newClickCount);

        });

    });

<button data-value="1" class="numbs">1</button>
<button type="button" data-value="2" class="numbs">2</button>
<button type="button" data-value="3" class="numbs">3</button>
<button type="button" data-value="4" class="numbs">4</button>
<button type="button" data-value="30" class="numb" click-count=1>+30s</button>
<input type="number" min="1" id="inputOutput">

Upvotes: 1

Related Questions