StylesheetDog StylesheetDog - 7 months ago 14
Javascript Question

JS defined method is equal to NaN in only one part of statement

I'm building part of a clicker that allows you to make a new object that holds a price, price increment and money per second. I've made a prototype that has an If statement that checks if you have enough money for purchase. Inside that If statement is a while loop that makes sure a counter stops when you've reached max money.

The problem is i'm using a method called addMps(money per sec) and it tells how much money is added per second. In the first part of the If statement the addMps method works fine but in the second it returns not a number. With just a number or a variable works fine. Any suggestions?

heres my code



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>clicker testing</title>
<link href="/style.css" rel="stylesheet" type="text/css" media="all">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script>
/* $(".test").click(function() {
if(amount >= testPrice) {
memory -= testPrice;
testPrice += 25;
memoryPerSec+= 10;
$(".logo").text("logo plus 10mps: " + logoPrice + "memory");
memoryPerSecUpdate();
function logo() {
if(memory < maxMemory) {
memory+= 10;
counterUpdate();
setTimeout(logo, 1000);
}
}
setTimeout(logo, 0);
}
else {
alert("not enough memory");
}
});*/
var money = 200;
var maxMoney = 300;
var mps = 0;
function updateCounters() {
$(".money").text("money: " + money);
$(".mps").text("money per sec: " + mps);
$(".max").text("max money: " + maxMoney);
}
function clicker(addPrice, addPriceIncrement, addMps) {
this.addPrice = addPrice;
this.addPriceIncrement = addPriceIncrement;
this.addMps = addMps;
}
var stuff = new clicker(100, 25, 10);
clicker.prototype.buy = function() {
if(money >= this.addPrice) {
money -= this.addPrice;
this.addPrice += this.addPriceIncrement;
mps += this.addMps;
updateCounters();
function max() {
if(money < maxMoney) {
money += this.addMps;
updateCounters();
setTimeout(max, 1000);
}
}
setTimeout(max, 0);
}
else {
alert("not enough memory");
}
};
$(document).ready(function() {
updateCounters();
$(".stuff").click(function() {
stuff.buy();
});
});
</script>
</head>
<body style="text-decoration: underline; font-family: verdana;">
<div class="stuff">stuff</div>
<div class="money"></div>
<div class="mps"></div>
<div class="max"></div>
<h4>go ahead an click stuff then change this.addMps to a number in the max() function and it works:<br>
p.s its on line 56
</h4>
</body>
</html>




Answer

The problem is this is not the same thing inside a function, it gets redefined, so you have to put it into another variable, like this var self = this;. See below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>clicker testing</title>
      <link href="/style.css" rel="stylesheet" type="text/css" media="all">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
      <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
<script>
/*    $(".test").click(function() {
 if(amount >= testPrice) {
  memory -= testPrice;
   testPrice += 25;
    memoryPerSec+= 10;
     $(".logo").text("logo plus 10mps: " + logoPrice + "memory");
     memoryPerSecUpdate();
function logo() {
 if(memory < maxMemory) {
  memory+= 10;
   counterUpdate();
    setTimeout(logo, 1000);
     }
      }
       setTimeout(logo, 0);
 }
 else {
  alert("not enough memory");
}
});*/
var money = 200;
 var maxMoney = 300;
  var mps = 0;
function updateCounters() {
  $(".money").text("money: " + money);
   $(".mps").text("money per sec: " + mps);
    $(".max").text("max money: " + maxMoney);
}
   function clicker(addPrice, addPriceIncrement, addMps) {
        this.addPrice = addPrice;
         this.addPriceIncrement = addPriceIncrement; 
          this.addMps = addMps;
   }
   var stuff = new clicker(100, 25, 10);
clicker.prototype.buy = function() {
 if(money >= this.addPrice) {
  money -= this.addPrice;
   this.addPrice += this.addPriceIncrement;
    mps += this.addMps;
     updateCounters();
var self = this;
function max() {
 if(money < maxMoney) {
  money += self.addMps;
   updateCounters();
    setTimeout(max, 1000);
     }
      }
       setTimeout(max, 0);
 }
 else {
  alert("not enough memory");
}
};
$(document).ready(function() {
  updateCounters();
   $(".stuff").click(function() {
    stuff.buy();
  });
});
</script>
  </head>
<body style="text-decoration: underline; font-family: verdana;">
  <div class="stuff">stuff</div>
  <div class="money"></div>
  <div class="mps"></div>
  <div class="max"></div>
  <h4>go ahead an click stuff then change this.addMps to a number in the max() function and it works:<br>
  p.s its on line 56
  </h4>
</body>
</html>