JavaScript onClick get input`s value and + 1, not as a string

Question

$(document).ready(function() {
  $(".bubble").click(function() {
    // $("input").append(" <b>Appended text</b>");
    var x = document.getElementById("input").value;
    var y = x + 1;
    x = y;
    console.log(x);
    $('#input').val($('#input').val() + 1);
  });
});

.bg {
  height: 400px;
  background-color: #FFF1F1;
  /*display: inline-block;*/
  position: relative;
}
.bubble {
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background-color: #24E93E;
  cursor: pointer;
  position: absolute;
  bottom: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="row text-center">
    <div class="col-xs-3 btnDiv">
      <!-- <button type="button" class="btn btn-danger">STOP</button> -->
      <!-- <button type="button" class="btn btn-success">PLAY</button> -->
    </div>
    <div class="col-xs-6  bg main-block">
      <div class="bubble"></div>
    </div>
    <div class="col-xs-3 score-place">
      <input id="input" type="text" name="" placeholder="0">
    </div>
  </div>
</div>

Here on click, in input, it is starting from 1, but after that it is adding 1 like string. I need to do it as a math +. I am using their jQuery, but it is also ok to write the code just in JavaScript

Adam Azad · Accepted Answer · 2016-12-09T17:59:53.687

Parse the input as integer using parseInt() and keep referring to x

var x = document.getElementById("input").value;
var y = (parseInt(x, 10) || 0) + 1;
x = y;
console.log(x);
 $('#input').val(x); // do not add +1 again

$(document).ready(function(){
      $(".bubble").click(function(){
          // $("input").append(" <b>Appended text</b>");
          var x = document.getElementById("input").value;
          var y = (parseInt(x, 10) || 0) + 1;
          x = y;
          console.log(x);
          $('#input').val(x);
      });
  });

.bg{
 height: 400px;
 background-color: #FFF1F1;
 /*display: inline-block;*/
 position: relative;
}

.bubble{
 height: 30px;
 width: 30px;
 border-radius: 50%;
 background-color: #24E93E;
 cursor: pointer;
 position: absolute;
 bottom: 0;
 left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
 <div class="container">
  <div class="row text-center">
   <div class="col-xs-3 btnDiv">
    <!-- <button type="button" class="btn btn-danger">STOP</button> -->
    <!-- <button type="button" class="btn btn-success">PLAY</button> -->
   </div>
   <div class="col-xs-6  bg main-block">
    <div class="bubble"></div>
   </div>
   <div class="col-xs-3 score-place">
    <input id="input" type="text" name="" placeholder="0">
   </div>
  </div>
 </div>

I changed the row with the one You told, but the effect is totally the same — Aghasi Grigoryan, Dec 09 '16 at 17:55
@canon The actual problem isn't the default being 8, but that `012` may not be `12`, but `10` in octal. — Ismael Miguel, Dec 09 '16 at 17:57
@canon According to http://stackoverflow.com/a/7818929/2729937 the radix will be assumed based on the starting characters, if none is supplied. — Ismael Miguel, Dec 09 '16 at 18:10

Brian Moreno · Answer 2 · 2016-12-09T18:05:14.063

-3

Use parseInt() in your javascript to convert the string to an integer.

$(".bubble").click(function() {
    $('#input').val(parseInt($('#input').val(), 10) + 1);
});

JSFiddle: https://jsfiddle.net/m52fwkjt/

edited Dec 09 '16 at 18:05

answered Dec 09 '16 at 17:57

Brian Moreno

871
2
10
32

You are missing the radix on `parseInt()` – Ismael Miguel Dec 09 '16 at 17:58
1

@BrianMoreno [You should still include it](http://stackoverflow.com/q/6611824/4642212). Or simply use `Number`. – Sebastian Simon Dec 09 '16 at 18:04
Some implementations may interpret `parseInt('012')` as if the number was `12` in octal, which is `10` in decimal. – Ismael Miguel Dec 09 '16 at 18:05

JavaScript onClick get input`s value and + 1, not as a string

2 Answers2