Expense Tracker

#1

The JS code which I wrote isn’t working for the Expense Tracker project. When I try to add expenses it doesn’t get updated in the categories table. I have uploaded the code. Please help me with this.

image
image1035×471 29.3 KB

let expense_per_category = [0, 0, 0, 0, 0];
var count = 4;
update_sum();
function update_sum() {
var sum = document.querySelectorAll(".sum");
for (var i = 0; i < sum.length; i++) {
sum[i].innerHTML = " - " + expense_per_category[i] + " Rs. Spent";
}
}
function add_expense() {
var amount = document.getElementsByClassName(“form-input”)[0].value;
var date = document.getElementsByClassName(“form-input”)[2].value;
var note = document.getElementsByClassName(“form-input”)[3].value;
var category = document.getElementsByClassName(“form-input”)[1].selectedIndex;
var selected = document.getElementsByTagName(“option”)[category].value;

if (amount && date && note && selected) {
alert(“Succesfully added expense!”);
var table = document.getElementsByTagName(“table”)[0];
var new_row = document.createElement(“tr”);
new_row.innerHTML = <tr style = border-bottom: 1px solid white;> <td>${amount}</td> <td>${selected}</td> <td>${date}</td> <td>${note}</td> </tr> ;
table.appendChild(new_row);
expense_per_category[category] =
parseInt(expense_per_category[category]) + parseInt(amount);
update_sum();
console.log(count);
document.getElementsByClassName(
“add-new-expense”
)[0].getElementsByClassName.display = “none”;
} else {
alert(“Please enter all details!”);
}
}
function add_category() {
var new_category_value = document.getElementsByName(“new-category”)[0].value;
if (new_category_value) {
var dropdown = document.getElementsByName(“category”)[0];
var available_categories = document.getElementsByClassName(
“available-categories”
)[0];
var new_category_option = document.createElement(“option”);
new_category_option.innerHTML = <option>${new_category_value}</option>;
count++;
expense_per_category[count] = 0;
var new_category_span = document.createElement(“span”);
new_category_span.innerHTML = <span>${new_category_value}<span class = "sum"> - ${expense_per_category[count]}Rs spent </span></span>;
dropdown.appendChild(new_category_option);
available_categories.appendChild(new_category_span);
document.getElementsByClassName(
“add-category”
)[0].getElementsByClassName.display = “none”;
}
}
function add_category_page() {
if (
document.getElementsByClassName(“add-category”)[0].style.display == “block”
) {
document.getElementsByClassName(“add-category”)[0].style.display = “none”;
} else {
document.getElementsByClassName(“add-category”)[0].style.display = “block”;
}
}
function add_expense_page() {
if (
document.getElementsByClassName(“add-new-expense”)[0].style.display ==
“block”
) {
document.getElementsByClassName(“add-new-expense”)[0].style.display =
“none”;
} else {
document.getElementsByClassName(“add-new-expense”)[0].style.display =
“block”;
}
}

#2

Hi @ShreyPatnaik ,
Please wrap any value you set to the innerHTML property in"".

For example,

new_row.innerHTML = "<tr style = border-bottom: 1px solid white;> <td>${amount}</td> <td>${selected}</td> <td>${date}</td> <td>${note}</td> </tr>" ;

Make similar changes in all the places. Do let me know if you need any other help.

#3

image
image1378×919 63.8 KB

I made the change still expenses are not updating in category table.

#4

@ShreyPatnaik Apologies for the delayed response. Can you please share your entire code (HTML, CSS, js) so I can better understand the issue.

#5

Hi @raghav.srivastava
You can access all the codes using the link below:-
Expense Tracker

#6

@ShreyPatnaik Apologies for the delayed response. I am checking your code and will get back to you shortly.

#7

@ShreyPatnaik I have made the changes and commented after them. Please find the JavaScript code below.

Also your paths are bit too complex,
Instead of ../Expense Tracker/expense_tracker.css, it could have been just expense_tracker.css.

Do let me know if you need any other help.

let expense_per_category = [0, 0, 0, 0, 0];
var count = 4;
update_sum();
function update_sum() {
  var sum = document.querySelectorAll(".sum");
  for (var i = 0; i < sum.length; i++) {
    sum[i].innerHTML = " - " + expense_per_category[i] + " Rs. Spent";
  }
}
function add_expense() {
  var amount = document.getElementsByClassName("form-input")[0].value;//made change, wrong index
  var date = document.getElementsByClassName("form-input")[2].value;//made change, wrong index
  var note = document.getElementsByClassName("form-input")[1].value;//made change, wrong index
  var category = document.getElementById("category").selectedIndex;//made change, wrong element was selected, new category instead of category
  var selected = document.getElementsByTagName("option")[category].value;

  if (amount && date && note && selected) {
    alert("Succesfully added expense!");
    var table = document.getElementsByTagName("table")[0];
    var new_row = document.createElement("tr");
    new_row.innerHTML =
      "<tr style = border-bottom: 1px solid white;> <td>${amount}</td> <td>${selected}</td> <td>${date}</td> <td>${note}</td> </tr>";
    table.appendChild(new_row);
    expense_per_category[category] =
      parseInt(expense_per_category[category]) + parseInt(amount);
    update_sum();
    console.log(count);
    document.getElementsByClassName(
      "add-new-expense"
    )[0].getElementsByClassName.display = "none";
  } else {
    alert("Please enter all details!");
  }
}
function add_category() {
  var new_category_value = document.getElementsByName("new-category")[0].value;
  if (new_category_value) {
    var dropdown = document.getElementsByName("category")[0];
    var available_categories = document.getElementsByClassName(
      "available-categories"
    )[0];
    var new_category_option = document.createElement("option");
    new_category_option.innerHTML = `<option>${new_category_value}</option>`;
    count++;
    expense_per_category[count] = 0;
    var new_category_span = document.createElement("span");
    new_category_span.innerHTML = `<span>${new_category_value}<span class = "sum"> - ${expense_per_category[count]}Rs spent </span></span>`;
    dropdown.appendChild(new_category_option);
    available_categories.appendChild(new_category_span);
    document.getElementsByClassName(
      "add-category"
    )[0].getElementsByClassName.display = "none";
  }
}
function add_category_page() {
  if (
    document.getElementsByClassName("add-category")[0].style.display == "block"
  ) {
    document.getElementsByClassName("add-category")[0].style.display = "none";
  } else {
    document.getElementsByClassName("add-category")[0].style.display = "block";
  }
}
function add_expense_page() {
  if (
    document.getElementsByClassName("add-new-expense")[0].style.display ==
    "block"
  ) {
    document.getElementsByClassName("add-new-expense")[0].style.display =
      "none";
  } else {
    document.getElementsByClassName("add-new-expense")[0].style.display =
      "block";
  }
}
1 Like
Expense Tracker Project
Issues with Expense Tracker
#8

It still not working