Код только хорошо работает в первый раз, после этого он падает (DOM) - PullRequest
Новая
       11

Код только хорошо работает в первый раз, после этого он падает (DOM)

0 голосов
/ 04 июня 2018

Недавно (вчера) я начал работать над сравнительно небольшим проектом - приложением для отслеживания денег.Я не хочу, чтобы в приложении было много функций, я просто поднял его, потому что я хотел пересмотреть некоторые из моих начальных знаний, так как последние пару месяцев я был в бэк-энде.В любом случае, у меня проблемы с тем, что мой код работает только при первом запуске.Что я имею в виду?Ну, я хочу иметь переменную под названием бюджет и хранить бюджет пользователя на сегодня.Когда он все потратил (у меня есть варианты в приложении, где он может потратить свои деньги), должна появиться кнопка пополнения с сообщением об ошибке.Когда пользователь нажимает кнопку пополнения, он может пополнить свой бюджет.Все работает нормально, теперь пользователь успешно пополнил свой бюджет, НО, когда я пытаюсь выполнить тот же процесс снова, мое приложение вылетает, когда кнопка пополнения снова появляется (или когда пользователь потратил весь свой бюджет).Я спрашиваю об этом не потому, что мне лень найти ошибку или что-то в этом роде, а потому, что я очень хорошо помню, что у меня была такая же проблема с моими старыми проектами, и я никогда не обнаруживал ошибку, которая ее вызывает.

Подводя итог, моя проблема в том, что мой код работает хорошо только с первой попытки, после чего происходит сбой.

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

Ответы [ 2 ]

0 голосов
/ 04 июня 2018

извините, не могу воспроизвести ошибку.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";
}
0 голосов
/ 04 июня 2018

вы добавляете слушатели mutliple к тому же элементу 

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