Value возвращает 0. Как сохранить значение value после ввода в поле?

Question

[Dayzy]

Пишу для тренировки простенькую программу по расчету бюджета. Есть 4 параметра:

1) Общая сумма в месяц
2) Расходы на проезд
3) Расходы на еду
4) Расходы на развлечения
Схема расчета:
Чистая прибыль в месяц = Общая сумма - (Расходы на проезд + Расходы на еду + Расходы на развлечения)
Суть проблемы: value возвращает 0

let mainMonthBudget = document.getElementById("month-sum").value, //графа бюджета за месяц
transportExpenses = document.getElementById("bus-sum").value, //графа расходов на проезд
foodExpenses = document.getElementById("food-sum").value, //графа расходов на еду
funExpenses = document.getElementById("fun-sum").value; //графа расходов на развлечения

function sum(){
    let clearBudget = mainMonthBudget - (transportExpenses + foodExpenses + funExpenses);
    window.alert("Your budget is " + clearBudget);
}

на кнопке висит функция:

<button class="main-calculate-button" onclick="sum()">Рассчитать!</button>

Подозреваю, что значение value нужно еще каким-то образом сохранить после ввода данных. Подскажите, пожалуйста.

Answer 1

[Евгений]

document.getElementById("month-sum").value - вернет строку)
Используйте так
+document.getElementById("month-sum").value
Либо функция parseInt();

В готовом виде:

function sum(){
let mainMonthBudget = +document.getElementById("month-sum").value; //графа бюджета за месяц
let transportExpenses = +document.getElementById("bus-sum").value; //графа расходов на проезд
let foodExpenses = +document.getElementById("food-sum").value; //графа расходов на еду
let funExpenses = +document.getElementById("fun-sum").value; //графа расходов на развлечения

    let clearBudget = mainMonthBudget - (transportExpenses + foodExpenses + funExpenses);
    window.alert("Your budget is " + clearBudget);
}

Comments

[Dayzy]

Все равно 0 :-(

[Евгений]

Dayzy, странно... сразу не углядел что запятые, переделал с ;
В отладчике что пишет? id элементов совпадают с id в js?

[Евгений]

Поставь точку астанова и проследи какие значения получают из формы переменные)

[Евгений]

Dayzy, еще одну ошибку нашел, переменные должны быть в функции, иначе они пытаются получить данные которых еще нет, и при вызове функции они не отрабатывают

[Dayzy]

Спасибо большое, попробую!

[Dayzy]

Евгений, да, проблема была именно в том, что переменные объявлены вне функции. Спасибо!!!

[Евгений]

Dayzy, все зависит от того где твой код (ну первоначальный) был, если в шапке - то переменные вобще ничего не могли получить, т.к. элементыс данными айди еще не существовали, а если после разметки, то они получали то, что там было по умолчанию, полагаю, что ничего)
Но когда они в теле функции, то будут отрабатывать во время вызова функции