Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by mckbas
mckbas
14,166 Points

Submission returns undefined

I was provided two project files - one complete and one to fill in. I can get the form to show output, but it's nothing close to what I was hoping for. Can someone point me in the right direction? I know my addTransaction function correctly captures and pushes the information I need to my transList array. However, my calculateBalance function doesn't do anything - even when I add a console.log. Additionally, my getTransaction function just returns three columns & three rows of "undefined".

"use strict";

var transList = [];

var getTransaction = function(index) {
  return transList.length
};

var addTransaction = function (type, amount, date) {
  transList.push(type, amount, date);
  console.log(type + " "+ amount+ " "+ date)
};

var calculateBalance = function (type, amount, total) {
  if (type === "deposit") {
    total += amount;
  }
  else {
    total -= amount;
  }
};

Completed file:

 "use strict";

var $ = function(id) { return document.getElementById(id); };

var updateDisplay = function () {
    var html = "<tr><th>Date</th><th>Amount</th><th>Balance</th></tr>";
    var html = html.concat("<tr><td></td><td></td><td>0</td></tr>");

    var count = getTransaction();
    var total = 0;

    for (var i = 0; i < count; i++) {
        var trans = getTransaction(i);
        total = calculateBalance(trans["type"], trans["amount"], total);

        html = html.concat("<tr><td>", trans["dateDisplay"], "</td><td>", trans["amountDisplay"], "</td><td>", total, "</td></tr>");
    }
    $("transactions").innerHTML = html;

};

var add = function() {
    if ($("date").value === "") {
        addTransaction($("type").value, $("amount").value);
    } else {
        addTransaction($("type").value, $("amount").value, $("date").value);
    }
    updateDisplay();
};

window.onload = function () {
    $("add").onclick = add;
    updateDisplay();
};
Brandon Leichty
.a{fill-rule:evenodd;}techdegree seal-36
Brandon Leichty
Full Stack JavaScript Techdegree Graduate 35,193 Points

Hey whalien52,

Could I see the associate html file that goes with this JavaScript? A few things that might help right off the bat:

If you add return total to the end of your calculateBalance() function, it'll return the proper amount instead of undefined. Like this: 

if (type === "deposit") {
    total += amount;
  }
  else {
    total -= amount;
  }
  return total;
};

Secondly, you've declared the variable html twice: 

var html = "<tr><th>Date</th><th>Amount</th><th>Balance</th></tr>";
var html = html.concat("<tr><td></td><td></td><td>0</td></tr>");

If I can see the rest of your code I'll try and help you figure out what's going on. Otherwise, nice work so far! ??

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

The updateDisplay function is expecting each element of transList to be an object.

Were you given any instructions on that object? It looks like it's expecting the properties "type", "amount", "dateDisplay" and "amountDisplay"

Your most recent version is pushing a simple array of 3 values onto transList.

Also, you should use the "Add Comment" link when replying to someone's comment or answer. You're leaving answers each time you reply along with various versions of the code which is making all of this harder to follow.

3 Answers

mckbas
mckbas
14,166 Points
mckbas
mckbas
14,166 Points

Brandon Leichty ,

Thanks for your help! I really appreciate it!

Here are some updates I've made to my code thus far. I'm only allowed to make adjustments to these three functions. Which I think is what is confusing me.

"use strict";

var transList = [];

var getTransaction = function(index) {
  for (var k in transList) {
    if (transList.hasOwnProperty(k)) {
      return transList.length
        console.log(transList[k]);
    }
  }

};

var addTransaction = function (type, amount, date) {
  var newTrans = {};
  newTrans['type'] = type;
  newTrans['amount'] = amount;
  newTrans['date'] = date;
  var today = new Date();
  var dd = today.getDate()
  var mm = today.getMonth()+1
  var yyyy = today.getFullYear();
  if(dd<10) {
    dd='0'+dd
  }

  if(mm<10) {
      mm='0'+mm
  }
    today = mm + '/' + dd + '/' + yyyy;

  if ($('date').value === "") {
      date = today;
    }
    transList.push(newTrans);
    console.log(type + " "+ amount+ " "+ date)
  };

var calculateBalance = function (type, amount, total) {

  if ($('type').value === "deposit") {
    total = Number(total) + Number(amount);
  }
  else {
    total = Number(total) + Number(amount);
  }
  return total;
};

and here is the HTML file

<!DOCTYPE html>
<html>
<head>
    <title>Monthly Balance Calculator</title>
    <link rel="stylesheet" type="text/css" href="balance.css">
    <script type="text/javascript" src="library_balance.js"></script>
    <script type="text/javascript" src="balance.js"></script>
</head>

<body>
    <main>
        <h1>Monthly Balance Calculator</h1>
        <h2>Add Transaction</h2>
        <div>
            <label>Date:</label>
            <input type="text" id="date"><br>

            <label>Type:</label>
            <select id="type">
                <option value="deposit">Deposit</option>
                <option value="withdrawal">Withdrawal</option>
            </select><br>

            <label>Amount:</label>
            <input type="text" id="amount" value="100"><br>

            <label>&nbsp;</label>
            <input type="button" id="add" value="Add Transaction"><br>
        </div>

        <h2>Transactions</h2>
        <table id="transactions"></table>
    </main>
</body>
</html>
Brandon Leichty
.a{fill-rule:evenodd;}techdegree seal-36
Brandon Leichty
Full Stack JavaScript Techdegree Graduate 35,193 Points

Cool. I'll take a look at it. So you need to adjust those three functions to make the app/code work?

Also, I'm assuming in your code you've linked to the JS file and jQuery CDN? 

<script src="app.js"></script>
 <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
mckbas
mckbas
14,166 Points
mckbas
mckbas
14,166 Points

Yes sir, the JS files have been linked. However, we weren't provided with any jQuery files - nor are we allowed to use them.

Brandon Leichty
.a{fill-rule:evenodd;}techdegree seal-36
Brandon Leichty
Full Stack JavaScript Techdegree Graduate 35,193 Points

Maybe there's something I'm missing-- but $('type') and $('date') is jQuery. Otherwise if you're not allowed you to use jQuery you'll want to use document.getElementByType, querySelector, etc.

mckbas
mckbas
14,166 Points
mckbas
mckbas
14,166 Points

The JS file I'm not allowed to alter has used document.getElementById. Sorry for the confusion. I just meant that I'm not allowed to link anything external and the files weren't provided. I realize how confusing all of probably is - so I really appreciate your input.

Brandon Leichty
.a{fill-rule:evenodd;}techdegree seal-36
Brandon Leichty
Full Stack JavaScript Techdegree Graduate 35,193 Points

Haha yeah, that is confusing. So you are or aren't allowed to use jQuery? Because if you aren't allowed to, your current code won't work.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Brandon,

I misunderstood this too when trying to help on a previous question.

You have the following:

var $ = function(id) { return document.getElementById(id); };

The $ is being used as a shortcut for getElementById and jQuery isn't being used at all here.