I want a banner Success!and Oops!displayed on top of the browser whenever the prototype goingOutChecker()is working correctly, and I'm calling a prototype goingOutChecker()inside GeneralChecker(). However, when I comment on the prototype and the function call goingOutChecker(), the prototype monthlyBillCheckerAndSalaryChecker(), as well as its call, work fine. In other words, banners Success!and Oops!displayed as they should, when the user clicks Submit, if the first two fields are filled in correctly or incorrectly.
My question is: why does the prototype goingOutChecker()work correctly when I call the prototype goingOutChecker()inside GeneralChecker()? In other words, whenever all 3 fields are filled in correctly or incorrectly, why don't these banners appear?
Also, I am not getting console errors like a note.
Here gameTime.htmlfile
<!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 in dollars)</h1>
<label for="usr">What your annual salary?</label>
<input type="field" class="form-control" id="salary" placeholder="What 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 gameTime.jsfile
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);
source
share