Question

最近（昨天）我开始研究一个相对较小的项目 - 资金跟踪应用程序。我不希望该应用程序有很多功能，只是因为我想修改我的一些前端知识，因为过去几个月我已经进入了后端。无论如何 - 我遇到的麻烦是我的代码只在我第一次运行它时才有效。我的意思是什么？好吧，我希望有一个名为预算的变量，并存储用户今天的预算。当他花掉所有的时间（我在应用程序中有他可以花钱的选项）时，会弹出一个重新填充按钮并显示错误消息。当用户点击重新填充按钮时，他可以重新填写预算。一切正常，现在用户已经成功地重新填充他的预算但是当我再次尝试再次执行相同的过程时，我的应用程序在再次弹出重新填充按钮时崩溃（或者当用户花费了他所有的预算时）。我问这不是因为我懒得找到错误或其他什么，但因为我记得很清楚我的旧项目遇到了同样的问题，而且似乎从来没有找到导致它的错误。

总结一下，我的问题是我的代码只在第一次尝试中表现良好，然后崩溃。

<!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";
}

Answer 1

将mutliple侦听器添加到同一元素

refillButton.addEventListener("click", function(){
                    refill();
                });

Answer 2

抱歉，无法重现错误。 jsfiddle工作得很好。

https://jsfiddle.net/5x6sc5ge/

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";
}

代码仅在第一次运行良好，之后崩溃（DOM）

2 个答案: