Как сделать так, чтобы значения добавлялись при каждом нажатии кнопки в jquery?

Question

У меня есть кнопки, которые нужно нажимать, и когда они нажимаются, я хочу, чтобы значение увеличивалось на то же значение, которое нажималось;вот мой 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 для вывода

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

CSS при необходимости

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

ну, как Java Script , где я мог бы просто написать;

  btnCountOutput.value += num;

Чтобы каждый раз, когда нажималась кнопка, просто добавляли на выход любое значение, которое нажимали

Answer 1

Вам нужно захватить значение текстового поля, а затем добавить его к числу, которое вы передаете. После того, как добавление произойдет, вы можете снова установить значение текстового поля.Я добавил переменную с именем currentCount в качестве примера:

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);
  });
});

Вам также не нужна ваша функция parseFloat.Вам нужна какая-то функция, чтобы убедиться, что ваша строка преобразована в число, но вы хотите либо Number, parseInt, либо +.parseFloat не требуется, если вы не будете работать с десятичными значениями.