ошибка Cannot read property 'addEventListener' of undefined at script.js:40
Проверил несколько раз, даже год вставил из урока, но ошибка всё таже. В чём может быть проблема?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700&subset=cyrillic" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="app">
<div class="logo">
<span>money</span>
keeper
</div>
<div class="title">
Расчет дневного бюджета
</div>
<div class="main">
<div class="data">
<div class="choose-expenses">Введите обязательные расходы</div>
<input class="expenses-item" type="text" id="expenses_1" placeholder="Наименование">
<input class="expenses-item" type="text" id="expenses_2" placeholder="Цена">
<input class="expenses-item" type="text" id="expenses_3" placeholder="Наименование">
<input class="expenses-item" type="text" id="expenses_4" placeholder="Цена">
<button class="expenses-item-btn">Утвердить</button>
<div class="optionalexpenses">Введите необязательные расходы</div>
<input class="optionalexpenses-item" type="text" id="optionalexpenses_1">
<input class="optionalexpenses-item" type="text" id="optionalexpenses_2">
<input class="optionalexpenses-item" type="text" id="optionalexpenses_3">
<button class="optionalexpenses-btn">Утвердить</button>
<div class="count-budget">Расчет дневного бюджета</div>
<button class="count-budget-btn">Рассчитать</button>
<div class="choose-income-label">Введите статьи возможного дохода через запятую</div>
<input class="choose-income" type="text" id="income">
<div class="checksavings">Есть ли накопления:
<input id="savings" type="checkbox" />
</div>
<label for="sum">Сумма</label>
<input class="choose-sum" id="sum" type="text">
<label for="percent">Процент</label>
<input class="choose-percent" id="percent" type="text">
<div class="open">
<button class="start" id="start">Начать расчет</button>
</div>
</div>
<div class="result">
<div class="result-table">
<div class="budget">Доход: </div>
<div class="budget-value"></div>
<div class="daybudget">Бюджет на 1 день: </div>
<div class="daybudget-value"></div>
<div class="level">Уровень дохода: </div>
<div class="level-value"></div>
<div class="expenses">Обязательные расходы: </div>
<div class="expenses-value"></div>
<div class="optionalexpenses">Возможные траты: </div>
<div class="optionalexpenses-value"></div>
<div class="income">Дополнительный доход: </div>
<div class="income-value"></div>
<div class="monthsavings">Накопления за 1 месяц:</div>
<div class="monthsavings-value"></div>
<div class="yearsavings">Накопления за 1 год:</div>
<div class="yearsavings-value"></div>
</div>
<div class="time-data">
<div class="year">
Год:
<input class="year-value" type="text" readonly>
</div>
<div class="month">
Месяц:
<input class="month-value" type="text" readonly>
</div>
<div class="day">
День:
<input class="day-value" type="text" readonly>
</div>
</div>
</div>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>//js
let startBtn = document.getElementById('start'),
bud_v = document.getElementsByClassName('budget-value')[0],
day_v = document.getElementsByClassName('daybudget-value')[0],
level_v = document.getElementsByClassName('level-value')[0],
exp_v = document.getElementsByClassName('expenses-value')[0],
opt_v = document.getElementsByClassName('optionalexpenses-value')[0],
inc_v = document.getElementsByClassName('income-value')[0],
month_v = document.getElementsByClassName('monthsavings-value')[0],
year_v = document.getElementsByClassName('yearssavings-value')[0],
exp_i = document.getElementsByClassName('expenses-item'),
btn_exp_i = document.getElementsByTagName('expenses-item-btn')[0],
btn_optExp = document.getElementsByTagName('optionalexpenses-btn')[1],
btn_countBud = document.getElementsByTagName('count-budget-btn')[2],
optExpItem = document.querySelectorAll('.optionalexpenses-item'),
chooseInc = document.querySelector('.choose-income-label'),
checkbox = document.querySelector('checkbox'),
chooseSum = document.querySelector('.choose-sum'),
percent = document.querySelector('#percent'),
year = document.querySelector('.year-value'),
inp_month_v = document.querySelector('.month-value'),
inp_day_v =document.querySelector('.day-value');
let money, time;
startBtn.addEventListener('click', function() {
time = prompt("Введите дату в формате YYYY-MM-DD");
money = +prompt("Ваш бюджет на месяц?");
while(isNaN(money)|| money == "" || money == null) {
money = +prompt("Ваш бюджет на месяц?");
}
appData.budget = money;
appData.timeData = time;
bud_v.textContent = money.toFixed();
year.value = new Date(Date.parse(time)).getFullYear();
inp_month_v.value = new Date(Date.parse(time)).getMonth() + 1;
inp_day_v.value = new Date(Date.parse(time)).getDate();
});
btn_exp_i.addEventListener('click', function() {
let sum = 0;
for (let i = 0; i < btn_exp_i.length; i++) {
let a = btn_exp_i[i].value,
b = btn_exp_i[++i].value;
if ((typeof (a)) != null && (typeof (b)) != null && a != '' && b != '' && a.length < 50) {
appData.expenses[a] = b;
sum += +b;
} else {
i = i - 1;
}
exp_v.textContent = sum;
}
});
let appData = {
budget: money,
timeData: time,
expenses: {},
optionalExpenses: {},
income: [],
savings: true,
detectDayBudget: function() {
appData.moneyPerDay = (appData.budget / 30).toFixed();
alert('Ваш ежедневный бюджет ' + appData.moneyPerDay);
},
detectLevel: function() {
if(appData.moneyPerDay < 100) {
console.log("Минимальный уровень достатка");
} else if(appData.moneyPerDay > 100 && appData.moneyPerDay < 2000) {
console.log("Уже лучше!");
} else if(appData.moneyPerDay > 2000) {
console.log("Вот теперь, то что надо!");
} else {
console.log("Что-то пошло не так :(");
}
},
checkSavings: function() {
if(appData.savings == true) {
let save = +prompt("Какова сумма накоплений, МММ?"),
percent = +prompt("Под какой процент?");
appData.monthIncome = save / 100 / 12 * percent;
alert("Доход в месяц с вашего депозита: " + appData.monthIncome);
}
},
chooseOptExpenses: function() {
for(let i = 1; i < 4;) {
let a = prompt("Статья необязательных расходов?");
if((typeof(a)) != null && a != '') {
appData.optionalExpenses[i] = a;
i++;
} else {
alert("Пожалуйста, заполните данные");
}
}
},
chooseIncome: function() {
for(let i = 0; i < 1;) {
let items = prompt("Что принесёт доп.доход? (Через запятую) ", '');
if(typeof(items) != null && items != '') {
appData.income = items.split(', ');
appData.income.push(prompt('Может, что-то ещё?'));
appData.income.sort();
alert('Способы доп.зароботка: ');
appData.income.forEach(function(item, i) {
alert(`${++i}: ${item}`);
});
i++;
} else {
alert('Пожалуйста, заполните данные');
}
}
}
};
// appData.start();
//appData.chooseIncome();
// alert('Наша программа включает в себя: ');
// for(key in appData) {
// alert(key);
// }
// appData.chooseExpenses();
// appData.detectLevel();
// appData.checkSavings();
// appData.detectDayBudget();
// appData.chooseOptExpenses();
