代码只在第一次执行良好，之后就会崩溃 (DOM)

Question

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

总而言之，我的问题是我的代码只在第一次尝试时表现良好，然后就崩溃了。

<!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

您将多个侦听器添加到同一个元素

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)

Code only performs well the first time, after that it crashes (DOM)

javascript

dom

web

frontend

dom-manipulation