Home project but my js isn't working

JavaScript
#1

I’m working on a home project to better understand what I’m learning, however, I cant get one part of my js to work, the ‘total’. I’ve tried different ways but it all comes back as 0 or ‘undefined’.

https://codepen.io/srandall/pen/VwmzgJd

#2

Problem you have in the switch statement. You are testing td3.value which does not exist hence it comes as undefined. You should use td3.innerHTML as below code:

// Look here I am evaluating td3.innerHTML not td3.value 
switch (td3.innerHTML)  {
    case "weekly":
      total = td2.value * 4;
      break;
    case "biweekly":
      total = td2, value * 2;
      break;
    case "monthly":
      total = td2.value;
      break;
     // Not sure why returning the total here. Not needed.
      return total;
}
#3

So I should use the td2 innerHTML for the math equation also? The ‘return total’ was an attempt at getting a return, I’d ran out of ideas.

#4

You could replace value in the option element with the corresponding number (4, 2, 1) and get rid of the switch altogether.

Your flow is quite confusing - you’re getting values from input, assigning them to different elements and then getting them out again. Better to save to a variable and work with that variable.

Also if you see a lot of repeating it’s possibly a good idea to extract repeating parts.

Example :

function createCell(value) {
  const td = document.createElement("td");
  td.innerText = value
  return td
}

function addRow() {
  "use strict";
  var tableBody = document.getElementById("table-body");
  var row = document.createElement("tr");

  var name = document.getElementById("name").value;
  var check = Number(document.getElementById("check").value);
  var freq = Number(document.getElementById("freq").value);

  row.appendChild(createCell(name));
  row.appendChild(createCell(check));
  row.appendChild(createCell(freq));
  row.appendChild(createCell(check * freq));

  tableBody.appendChild(row);
  document.getElementById("expform").reset();
}
#5

Very cool!! It worked!! Thank you!! Would you allow me to pick your brain on one more point that has me scratching my head? I would like to have a total of all the checks entered, I cant figure out how to do that.

#6

You could create a variable outside addRow and add total (i.e. check * freq) to it.

#7

What has me confused is adding the values outside of addRow(). The values doesn’t exist outside the function, I kind of get what your saying, but what has me scratching my head is once the function is returned, how do you go back and get the values that’s already been passed through. Not sure if I’m explaining my problem right.

#8

Why not? You create a variable, say let runningTotal = 0 outside addRow and then inside addRow you can reference it. In JS variables in outer scope are visible (google ‘closure in javascript’).

#9

I’m new here so I’m asking, I know I can reference a global variable inside the function, but outside the function the variable doesn’t get updated. (As in adding up several outputs of that function)Does it?

#10

You can always try out and see :slightly_smiling_face:
https://codepen.io/jenovs/pen/PobJpwZ

#11

GLORYOSKY!! I figured it out!! I created a global variable with an empty array then used .push() to enter the totals from my function into my array. If you’ll allow me one more indulgence though, I’m trying to add the totals in my array together, I tried this but…

var all = [];
function submitAll() {
  let checks = 0;
  for (var i = 0; i < all.length; i++) {
    checks += parseInt(all[i]);
  }
  document.getElementById("display").innerHTML =
    "Your total monthly income is; " + checks;
}