Why won't my prototype execute?
Question
I want the Success! & Oops! banner to appear on top of the browser whenever the goingOutChecker() prototype works properly & I call the goingOutChecker() prototype inside GeneralChecker() function. However, whenever I comment out the goingOutChecker() prototype & function call, the monthlyBillCheckerAndSalaryChecker() prototype, as well its call, work perfectly. In other words, both the Success! & Oops! banner appear as they should whenever the user hits Submit granted the first two fields are filled in correctly or incorrectly.
My question is, why won't goingOutChecker() prototype works properly whenever I call the goingOutChecker() prototype inside GeneralChecker() function? In other words, whenever all 3 fields are filled in correctly or incorrectly, why won't those banners appear?
Also, I'm getting no errors in the console, just as a side note.
Here's the gameTime.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>WOMP</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="gameTime.css">
</head>
<body>
<div class="container">
<div id="success"></div>
<div id="danger"></div>
<div id="success2"></div>
<div id="danger2"></div>
</div>
<form class="col-md-4 col-md-offset-4" name="formHandler" id="handle">
<div id="allFields">
<div class="moveUsername">
<h1>(All numbers inputted will be assumed that it's in dollars)</h1>
<label for="usr">What's your annual salary?</label>
<input type="field" class="form-control" id="salary" placeholder="What's your annual salary?" required="required">
</div>
<div class="ageMovement">
<label for="usr">How much do you spend every month on bills?</label>
<input type="field" class="form-control" id="monthlyBills" name="ageChecker" placeholder="How much do you spend every month on bills?" required="required">
</div>
<div class="emailMovement">
<label for="usr">How much do you spend when going out?</label>
<input type="field" class="form-control" id="goingOut" name="emailChecker" placeholder="How much do you spend when going out?" required="required">
</div>
<button type="submit" id="btnSubmit" class="btn btn-default" onsubmit="GeneralChecker()">Submit</button>
</form>
<script type="text/javascript" src="gameTime.js"></script>
</body>
</html>
Here's the gameTime.js file
function GeneralChecker(salary, fixedExpense, variableExpense) {
var self = this;
self.salary = salary;
self.fixedExpense = fixedExpense;
self.variableExpense = variableExpense;
self.isSalaryZeroOrLess = function() {
var s = parseInt(document.getElementById("salary").value);
console.log(this);
if(s <= 0) {
console.log("Looks like you have no income!");
} else {
console.log("Your annual salary is: ", s);
}
self.monthlyBillCheckerAndSalaryChecker();
self.goingOutChecker();
}
}
GeneralChecker.prototype.monthlyBillCheckerAndSalaryChecker = function() {
var m = parseInt(document.getElementById("monthlyBills").value);
var firstDiv = document.getElementsByTagName("div");
var secondDiv = document.getElementsByTagName("div");
var node = document.getElementById("danger");
var node2 = document.getElementById("success");
if(m <= 0 || isNaN(m)) {
console.log("Looks like you have no monthly payments to make!");
secondDiv[2].innerHTML = "<strong>Oops!</strong> Looks like you have an invalid input.";
node.className += " alert alert-danger";
} else {
firstDiv[1].innerHTML = "<strong>Success!</strong> Check for advice below.";
node2.className += " alert alert-success";
}
var s = parseInt(document.getElementById("salary").value);
var userMonthlySalary = s / 12;
console.log(userMonthlySalary);
if(userMonthlySalary) {
console.log("That means you make " + userMonthlySalary + " a month.");
}
}
GeneralChecker.prototype.goingOutChecker = function() {
var m = parseInt(document.getElementById("goingOut").value);
var firstDiv = document.getElementsByTagName("div");
var secondDiv = document.getElementsByTagName("div");
var node = document.getElementById("danger2");
var node2 = document.getElementById("success2");
if(m <= 0 || isNaN(m)) {
console.log("You don't go out much");
secondDiv[4].innerHTML = "<strong>Oops!</strong> Looks like you have an invalid input.";
node.className += " alert alert-danger";
} else {
firstDiv[3].innerHTML = "<strong>Success!</strong> Check for advice below.";
node2.className += " alert alert-success";
}
}
var fin = new GeneralChecker(1000, 1000, 1000);
document.querySelector("#btnSubmit").addEventListener("click", fin.isSalaryZeroOrLess);
1 answers
solution1
1 2016-12-30 15:34:53
You're losing the object context when you bind the event handler. You could do it either like this:
document.querySelector("#btnSubmit").addEventListener("click", function() {
fin.isSalaryZeroOrLess();
});
or like this:
document.querySelector("#btnSubmit").addEventListener("click", fin.isSalaryZeroOrLess.bind(fin));
The value of this depends not on how the function is created with respect to some object, but rather on how the function is invoked . By passing the reference to the function as in your original code, the relationship to that fin object is lost.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.