Adding 1 to an input field

Question

I can't figure out why this wont work. I'm trying to get a simple counter working. When a user clicks "yes" I want to increase the value of a hidden text box by 1. Currently, when I click yes, the text box's value changes to "102" and the appended text shows as "101102". Any ideas?

Here's the code I'm working with:

var yesValue  = parseInt($("#trend-one-yes").val());
$("#trend-one-yes").val(yesValue+1);

var $addDiv = $('#yes');
$addDiv.append($("#trend-one-yes").val());

---

Update

I added some of the suggested code. It's still outputting the wrong number. It should be increasing by 1 instead its going up by 2. Thanks for your help!

<div id="vote" class="animated" data-fx="slideInDown">   
  <div class="vote-w">
  <div class="vbut" id="yes"><div>&#xe0fe;</div><div class="tag">Yes</div></div>
  <div class="vbut" id="no"><div>&#xe0fd;</div><div class="tag">No</div></div>
</div>
                    
<div  id="results">
  <div class="res" id="yesNum"></div>
  <div class="res" id="noNum"></div>                    
  <form id="vals" method="post" action="data/save.php" target="sub">
    <input id="trend-one-yes" name="trend-one-yes" 
           value="<?php echo $survey->one->yes?>"/>
    <input id="trend-one-no" name="trend-one-no" 
           value="<?php echo $survey->one->no?>"/>                    
  </form>
  <iframe id="sub" frameborder="0" name="sub" 
          style="height:1px; width:1px;"></iframe>
</div>                     

And the script

<script>
  $("#yes").mouseup(function()
    {
      $(this).css("color","#ffffff");
      $('#results').slideDown({ duration: 1000, easing: "easeOutBounce" });
      var $tyes = $("#trend-one-yes");
      var count = parseInt($tyes.val(), 10) + 1
      $tyes.val(count);
      var $addDiv = $('#yesNum').text(count);
      $( "#vals" ).submit();
    });
</script>

---

Tried the code added below. Thanks again, but its still adding 2 instead of one. How can that be?

Answer 1

Instead of updating the #yes element with new value, you are appending the new value to the existing one. Use .html() to replace the existing value with new one

var $tyes = $("#trend-one-yes");
var count = parseInt($tyes.val(), 10) + 1
$tyes.val(count);

var $addDiv = $('#yes').text(count);

Answer 2

You need to replace the node value not append

$addDiv.html($("#trend-one-yes").val());

Answer 3

Recap of questions

1. Given a form-field value of 101 how do i increase it by one after clicking on an element?
2. why does my code sets the value to 101102 instead of changing the value to 102?
3. why does my updated code increase the value by 2 instead of increasing it by 1?

Question 1 you have to make sure that the value you get is of type number If you take a look at the jQuery docs for val you can see that val returns a String or a Number or an Array. So you have to make sure that you turn it into a number. To get the number of clicks you can use parseint 1, 2 .

// get the value from <input id=trend-one-yes type=??? <-- i assume type=text?
var yesCount = parseint($("#trend-one-yes").val(), 10); 
// increase value by 1 and write it back into the field
yesCount = yesCount  +1;
$("#trend-one-yes").val(yesCount);

Question 2 was because you used jQuery append() instead of val(). The question How do I add an integer value with javascript (jquery) has additional information.

var $addDiv = $('#yes'); // get a reference to <div id=yes>
// append is the wrong function --> $addDiv.append($("#trend-one-yes").val());

// the newYesCount will be increased by one after a certain user action
var newYesCount = GetNewYesCount(yesCount);
$addDiv.val(newYesCount);

Update 3 for Question 3

To be able to help i need more information. I believe that you want this:

• the initial value for yesCount is 101 and comes from <input id="trend-one-yes"
• after user clicks on <div id="yes"> the value yesCount (101) is increased by 1
• and the new value (101+1=102) is written into <div id="yesNum">

Your code shows that for <div id=yes a mouseup event is attached:

$("#yes").mouseup(function()
{
   // i assume get yes count from <input id="trend-one-yes
   var yesCount = GetCurrentYesCount();
   // increase yesCount by 1 after a certain user action
   var newYesCount = GetNewYesCount(yesCount);
   // write newYesCount into another form field
   // i assume <div class="res" id="yesNum">
});

The following could be reasons for your trouble

• the elements are mixed up
• mouseup fires twice because of event bubbling
• It could be that several event listeners are attached and your function mouseup fires twice or another function that increases by 1 fires. Check out how to see which event listeners are bound to an element
• Or it could be that you would like to increase by 1 only if a checkbox is checked. This means increase only by 1 if a checkbox was selected.

Help us to help you

If you could fork

• either my third codepen example
• or my 4th. codepen

so that it shows your use case i could help.