Recently(yesterday) I started working on a relatively small project - a money tracking app. I do not want the app to have many features, just picked it up because I wanted to revise some of my front end knowledge since the past couple of months I have been into back end. Anyway - what I am having trouble is that my code only works the first time I run it. What do I mean? Well, I want to have a variable called budget and store the user's budget for today. When he spent it all ( I have options in the app where he can spend his money ), a refill button should pop up with an error message. When the user clicks on the refill button, he can refill his budget. All works fine, now the user has successfully refilled his budget BUT when I try to do the same process again, my app crashes when the refill button pops up again(or when the user has spent all of his budget). I am asking this not because I am lazy to find the error or something, but because I remember pretty well that I had had the same problem with my old projects and never seemed to have found the error that is causing it.
To summarize it, my problem is that my code only performs well in the first attempt, after that it crashes.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 class="text-center">Your Budget: $<span id="budget">44</span></h1>
<h3><span id="errDisplay"></span></h3>
<button class="btn btn-success" style="display: none;" id="refillButton"><span id="refillDisplay">Refill</span></button><br>
<div class="container-fluid">
<div class="row text-center" style="border: 1px solid black;">
<div class="col-md-4">
<h4 style="border: 1px solid black"><span id="spentDisplay"></span>GYM</h4>
</div>
<div class="col-md-4">
<h4 style="border: 1px solid black">HANGOUT</h4>
</div>
<div class="col-md-4">
<h4 style="border: 1px solid black">FOOD</h4>
</div>
<div class="col-md-4">
<h4 style="border: 1px solid black">GYM</h4>
</div>
<div class="col-md-4">
<h4 style="border: 1px solid black">HANGOUT</h4>
</div>
<div class="col-md-4">
<h4 style="border: 1px solid black">FOOD</h4>
</div>
<div class="col-md-4">
<h4 style="border: 1px solid black">GYM</h4>
</div>
<div class="col-md-4">
<h4 style="border: 1px solid black">HANGOUT</h4>
</div>
<div class="col-md-4">
<h4 style="border: 1px solid black">FOOD</h4>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
var h4 = document.querySelectorAll("h4");
var budgetDisplay = document.querySelector("#budget");
var budget = Number(prompt("What's your budget?"));
var budgetAfterRefill = 0;
var errDisplay = document.querySelector("#errDisplay");
var spentDisplay = document.querySelector("#spentDisplay");
var refillDisplay = document.querySelector("#refillDisplay");
var refillButton = document.querySelector("#refillButton");
budgetDisplay.innerHTML = budget;
init();
function init(){
for(var i = 0; i < h4.length; i++){
h4[i].addEventListener("click", function(){
var spent = Number(prompt("How much did you spend?"));
if(spent>budget){
errMessage();
} else {
budget -= spent;
budgetDisplay.innerHTML = budget;
this.innerHTML += '. You spend ' + spent;
}
if(budget === 0){
errDisplay.innerHTML ="Your budget is 0. If you want to continue spending, consider refilling your balance";
errDisplay.style.color = "red";
refillButton.style.display = "block";
refillButton.addEventListener("click", function(){
refill();
})
}
});
}
}
function errMessage(){
errDisplay.innerHTML = "Cannot proceed because your budget is less than what you have spent now";
errDisplay.style.color = "red";
}
function refill(){
console.log("Not working")
var refilledBudget = Number(prompt("How much money do you want to refill"));
budget=refilledBudget;
budgetDisplay.innerHTML = budget;
refillButton.style.display = "none";
errDisplay.style.display = "none";
}
Aucun commentaire:
Enregistrer un commentaire