I am working on my first real JS app and am having a hard time finding what I am missing that keeps causing this to be undefined. This is a budget app where I am trying to take 3 user inputs (budget, expense name, and expense amount) and write them on the page. I am having problems with the expense part only coming up as undefined and having both my expense name and amount writing in my expense name section of the page.
Any help would be greatly appreciated!
//Selectors and Vars
let totalExpense;
let incomingCalcButton = document.getElementById('incomingCalcButton');
let outgoingCalcButton = document.getElementById('expenseButton');
let newExpenseName = document.querySelector("[name=expense_Name]").value;
let newExpenseAmount = document.querySelector("[name=expense_Value]").value;
let expensesNameSection = document.querySelector('#title_Expenses');
let expensesAmountSection = document.querySelector('#value_Expenses');
//Functions
function addExpense(event) {
//Prevent submission
event.preventDefault();
//Expense Name Div
const expenseNameDiv = document.createElement('div');
expenseNameDiv.classList.add('expName');
//Expense amonut div
const expenseAmountDiv = document.createElement('div');
expenseAmountDiv.classList.add('expAmount');
//Create LI Expense Names
const newExpName = document.createElement('li');
newExpName.innerText = newExpenseName.value;
newExpName.classList.add('expense-name');
expenseNameDiv.appendChild(newExpName);
//Create LI Expense Amounts
const newExpAmt = document.createElement('li');
newExpAmt.innerText = newExpenseAmount.value;
newExpAmt.classList.add('expense-amount');
expenseNameDiv.appendChild(newExpAmt);
//append to LI
expensesNameSection.appendChild(expenseNameDiv);
expensesAmountSection.appendChild(expenseAmountDiv);
//Clear input
newExpenseName.value = "";
newExpenseAmount.value = "";
}
// Event Handlers
incomingCalcButton.addEventListener("click", incomingCash);
expenseButton.addEventListener("click", addExpense);
Why would I not want to access that there? Would it be better to just declare the var there and then access the value attribute in the addExpense function? Thanks for the feedback!
It just doesn’t make any sense to assign newExpenseName to the value of the input field before anything was entered into the input field. newExpenseName won’t just magically be updated with the new value when a button is clicked. That’s not how JavaScript works. Instead, you’d have to put the assignment into your event handler.
So I see what you are saying. I have removed it from the original declaration of the newExpenseName and newExpenseAmount and just have it in addExpense(). That with a couple small changes have started to return the correct output. Thanks for pointing that out to me. I will have to look into .value to make sure I understand when and when not to do it going forward.
I do have a strange question about what I am getting though. Are you able to tell why I have gotten output that is formatted differently in different sections when I am using basically the same code? Thanks for all the help!
//Selectors and Vars
let totalExpense;
let incomingCalcButton = document.getElementById('incomingCalcButton');
let outgoingCalcButton = document.getElementById('expenseButton');
let newExpenseName = document.querySelector("[name=expense_Name]");
let newExpenseAmount = document.querySelector("[name=expense_Value]");
let expensesNameSection = document.querySelector('#title_Expenses');
let expensesAmountSection = document.querySelector('#value_Expenses');
function addExpense(event) {
//Prevent submission
event.preventDefault();
//Expense Name Div
const expenseNameDiv = document.createElement('div');
expenseNameDiv.classList.add('expName');
//Expense amonut div
const expenseAmountDiv = document.createElement('div');
expenseAmountDiv.classList.add('expAmount');
//Create LI Expense Names
const newExpName = document.createElement('li');
newExpName.innerText = newExpenseName.value;
newExpName.classList.add('expense-name');
expenseNameDiv.appendChild(newExpName);
//Create LI Expense Amounts
const newExpAmt = document.createElement('li');
newExpAmt.innerText = newExpenseAmount.value;
newExpAmt.classList.add('expense-amount');
expenseAmountDiv.appendChild(newExpAmt);
//append to LIs
expensesNameSection.appendChild(expenseNameDiv);
expensesAmountSection.appendChild(expenseAmountDiv);
//Clear input
newExpenseName.value = "";
newExpenseAmount.value = "";
}
// Event Handlers
incomingCalcButton.addEventListener("click", incomingCash);
expenseButton.addEventListener("click", addExpense);
The value in the HTML changes whenever you input a number, but JavaScript doesn’t notice that. You can only tell it to listen for events (like a button click or an input). Then you can read the updated value into your script.
I am speaking about the Expense title and Value sections at the bottom. I am trying to get both of them to write out as vertical lists instead of the title writing out horizontally. I have checked my CSS to confirm that I have not accidentally added a class name that would coincide with something else on the page. I will put that below here just in case. Thanks again for the help so far!
