Uncaught TypeError: Cannot read property 'value' of undefined

157
03 марта 2022, 07:10

Есть функция, которая записывает полученные с формы html документа значения в переменные а и b, в ней на 47й строке консоль выдает ошибку "Uncaught TypeError: Cannot read property 'value' of undefined at HTMLButtonElement" независимо от того вписанно в форму что-либо или нет.

let startSum = document.getElementById('start'), 
    budgetValue = document.getElementsByClassName('budget-value')[0], 
    dayBudjetValue = document.getElementsByClassName('daybudjet-value')[0], 
    levelValue = document.getElementsByClassName('level-value')[0], 
    expensesValue = document.getElementsByClassName('expenses-value')[0], 
    optionalExpensesValue = document.getElementsByClassName('optionalexpenses-value')[0], 
    incomeValue = document.getElementsByClassName('income-value')[0], 
    monthSavingValue = document.getElementsByClassName('monthsaving-value')[0], 
    yearSavingValue = document.getElementsByClassName('yearsaving-value')[0], 
    expensesItem = document.getElementsByClassName('expenses-item'), 
    expensesItemButton = document.getElementsByTagName("button")[0], 
    optionalItemButton = document.getElementsByTagName("button")[1], 
    countItemButton = document.getElementsByTagName("button")[2]; 
 
let optionalExpenses = document.querySelectorAll('.optionalexpenses-item'), 
    chooseIncome = document.querySelector('.choose-income'), 
    checkSaving = document.querySelector('.saving'), 
    sum = document.querySelector('.choose-sum'), 
    percent = document.querySelector('.choose-percent'), 
    yearValue = document.querySelector('.year-value'), 
    monthValue = document.querySelector('.month-value'), 
    dayValue = document.querySelector('.day-value'); 
 
let time, money; 
 
startSum.addEventListener('click', function(){ 
    time = prompt ("Введите наду в формате YYYY-MM-DD", ''); 
    money = +prompt ("Ваш бюджет на месяц?", ''); 
 
    while(isNaN(money) ||  money == "" ||  money == null) { 
            money = +prompt ("Ваш бюджет на месяц?", ''); 
        } 
    appData.budget = money; 
    appData.timeData = time; 
    budgetValue.textContent = money.toFixed(); 
    yearValue.value = new Date(Date.parse(time)).getFullYear(); 
    monthValue.value = new Date(Date.parse(time)).getMonth() + 1; 
    dayValue.value = new Date(Date.parse(time)).getDate(); 
}); 
 
expensesItemButton.addEventListener('click', function(){ 
    let sum = 0; 
 
    for (let i = 0; i < expensesItem.length; i++) { 
 
        let a = expensesItem[i].value, 
            b = expensesItem[++i].value; 
     
        if ( (typeof(a)) != null && (typeof(b)) != null && a != '' && b != '' && a.lenght < 50) { 
            console.log ("done"); 
            appData.expenses[a] = b; 
            sum += +b; 
        } else { 
            i = i - 1; 
        } 
    } 
    expensesValue.textContent = sum; 
});
<!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&amp;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/main.js"></script> 
</body> 
</html>

Answer 1
for (let i = 0; i < expensesItem.length - 1; i++) {
    let a = expensesItem[i].value,
        b = expensesItem[++i].value;
    ...
    ...  a.length < 50) {

Вот это - (typeof(a)) != null - что делает?

var a = null; 
console.log((typeof(a)) != null );

READ ALSO
WebSoket и Promise || Иммитация Ajax
javascript

WebSoket и Promise || Иммитация Ajax

Решил отказаться от Ajax и все взаимодействие с сервером провожу через вебсокеты

 81
Где ошибка в коде? Не работает
javascript

Где ошибка в коде? Не работает

 70
Добавляем класс всем кнопкам на странице
javascript

Добавляем класс всем кнопкам на странице

Доброе время суток! Вопрос вот в чем : Есть ТАБы(кнопки) при нажатии на каждый из которых добавляется класс active, на кокой ТАБ нажал, тому и добавился...

 90
PJAX перезагрузка страницы
javascript

PJAX перезагрузка страницы

Собственно как заставить PJAX сделать запрос на сервер и обновить страницу без перезагрузки не нажимая на ссылкуПробовал следующее

 63