Counter wont increment by decimals

Question

I'm taking the plunge into javascript and have thus far have been relatively successful in what I've been trying to do. Although I realize that most of what I'm doing is probably being done incorrectly, or inefficiently.

For my first "project" I was trying to make a basic game. Click on the pickaxe, and it adds +1 to your total rocks. After you hit 5 rocks you can buy a shovel which will start generating rocks for you at a rate of one per second. I've currently had to set this to 1 per second as nothing under 1 seems to work.

My code (It's still somewhat messy as I've been tweaking it a lot):

JSBIN DEMO

HTML:

Total Rocks: <input id="txtNumber" type="text" value="0" onfocus="this.blur()" style=" border:none; text-align:center; background-color:transparent;" />
<br>

<img style="border:0;" src="http://img2.wikia.nocookie.net/__cb20130308043142/minecraftpocketedition/images/6/6d/Pickaxe_1.jpeg" onclick="javascript:add()">
<br>

Rocks per second: <input id="perSec" type="text" value="0" onfocus="this.blur()" style="width:30px; border:none; text-align:center; background-color:transparent;" />
<br>     

Shovel(<input id="shovelCount" type="text" value="0" onfocus="this.blur()" style="width:20px; border:none; text-align:center; background-color:transparent;" />): 5 rocks 

<input id="shovelBuy" type="button" value="Buy" onclick="javascript:shovel()"/>

</body>

Javascript:

var totalRocks = 0;
var rocksPerSec = 0;
    function increment() {
       var txtNumber = document.getElementById("txtNumber");
       var newNumber = parseInt(txtNumber.value, 10) + rocksPerSec;
       txtNumber.value = newNumber;
    }
setInterval(function(){increment();}, 1000);

function add()
{
  var txtNumber = document.getElementById("txtNumber");
  var newNumber = parseInt(txtNumber.value, 10) + 1;
  txtNumber.value = newNumber;
}

function shovel()
{
  var txtNumber = document.getElementById("txtNumber");
  var value = parseInt(txtNumber.value, 10);
  if(value >= 5){
    var newNumber = parseInt(txtNumber.value, 10) - 5;
    txtNumber.value = newNumber;
    var shovelCount = document.getElementById("shovelCount");
    var newCount = parseInt(shovelCount.value, 10) + 1;
    shovelCount.value = newCount;

    rocksPerSec = rocksPerSec +1;
    return false;
  } 
}

My Question: Why can't I increment the counter (rockPerSec) by a decimal value?

I know pretty much nothing. I'm literally piecing together codes and tweaking them until I understand what they do. I shall look that up. Thanks. — SimplyAzuma, Jun 11 '14 at 18:32

score 1 · Accepted Answer · answered Jun 11 '14 at 18:43

1

I made this fiddle..You basically had to replace parseInt() with parseFloat() and if you're asking "Why?", the answer is because if you want to increment the numeber of rocks by 0.2 for example, parseInt(0.2) is always 0. So you would always add 0.2 to 0 and parse it back to 0..Hope it helps..

var totalRocks = 0;
var rocksPerSec = 0;
    function increment() {
       var txtNumber = document.getElementById("txtNumber");
       var newNumber = parseFloat(txtNumber.value, 10) + rocksPerSec;
       txtNumber.value = newNumber;
    }
setInterval(function(){increment();}, 1000);

function add()
{
  var txtNumber = document.getElementById("txtNumber");
  var newNumber = parseFloat(txtNumber.value, 10) + 1;
  txtNumber.value = newNumber;
}

function shovel()
{
  var txtNumber = document.getElementById("txtNumber");
  var value = parseFloat(txtNumber.value, 10);
  if(value >= 5){
    var newNumber = parseInt(txtNumber.value, 10) - 5;
    txtNumber.value = newNumber;
    var shovelCount = document.getElementById("shovelCount");
    var newCount = parseFloat(shovelCount.value, 10) + 1;
    shovelCount.value = newCount;

    rocksPerSec = rocksPerSec + 0.2;
    return false;
  } 
}

answered Jun 11 '14 at 18:43

Daniel Bejan

1,468
1
15
39

Icepickle mentioned this in the comments and it fixed it. (: But I'll copy my comment I left to him. "What would cause the results I'm seeing here? jsbin.com/mibay/21/edit click 5 times, buy a shovel and watch the counter go up. It's incrementing by 0.01 but eventually shows extra decimal places" – SimplyAzuma Jun 11 '14 at 18:45
[This](http://stackoverflow.com/questions/3439040/why-does-adding-two-decimals-in-javascript-produce-a-wrong-result#answer-3439125) might help you... – Daniel Bejan Jun 11 '14 at 18:52
Hmm that's quite an interesting read. Although, I didn't see much on how to limit it to two decimal points. – SimplyAzuma Jun 11 '14 at 18:56
You could use Math.round(num * 100) / 100 – Daniel Bejan Jun 11 '14 at 18:56
I actually tried that but it seemed to make no difference. Either that or I was doing it wrong. I know very little about JS at this point. haha – SimplyAzuma Jun 11 '14 at 18:58
Nevermind, my bad. I was adding it to the wrong spot, got it! Thanks a lot for your help! :D – SimplyAzuma Jun 11 '14 at 19:01
Glad I helped :).. I edited my fiddle form above to [>this<](http://jsfiddle.net/9vbK6/1/) and now it works just like you want if you still need it.. – Daniel Bejan Jun 11 '14 at 19:02

score 1 · Answer 2 · answered Jun 11 '14 at 21:42

As a help for your first project, i thought i show a suggestion of structuring code

jsfiddle: http://jsfiddle.net/j8CJS/

where you can start the code by using

var miner = new Miner();
miner.start();

it also allows resetting and stopping (or rather pauze) your current game. Your html code changes when relative properties are changed, and added some functions which i would normally borrow from jquery :)

Counter wont increment by decimals

2 Answers2