Question

我试图让我的月平衡计算器工作，我很确定我已经正确设置了所有内容但是我在第二个.js库文件中遇到了问题。变得无法点击......

截止日期，如果没有输入日期，我希望能够获得今天的日期

＆＃13;

"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();
};

＆＃13;

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: white;
    margin: 0 auto;
    width: 480px;
    border: 3px solid blue;
    padding: 10px 20px;
}
h1, h2 {
    color: blue;
}
h2 {
    border-bottom: 2px solid black;
}
label {
    float: left;
    width: 11em;
    text-align: right;
    padding-bottom: .5em;
}
input, select {
    margin-left: 1em;
    margin-bottom: 0.75em;
}
table {
    width: 95%;
    border: 1px solid black;
    border-collapse: collapse;
    margin: 1em auto;
}
th, td {
    text-align: left;
}
th {
    border-bottom: 1px solid black;
    width: 33%;
}

＆＃13;

<!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>

＆＃13;

只更改这些

＆＃13;

"use strict";

var transList = [];

var getTransaction = function(index) {

};

var addTransaction = function (type, amount, date) {
	var transaction = [];
	transaction["type"]   = type;
	transaction["amount"] = parseInt(amount);
	transaction["date"]   = date;
	transList.push(transaction);
};

var calculateBalance = function () {
	var balance = 0;
    for (var i = 0; i < transList.length; i++) {
		if (transList[i]["type"] === "deposit") {
			balance = balance + transList[i]["amount"];
		} else {
			balance = balance - transList[i]["amount"];
		}
	}
	return balance;
};

＆＃13;

每月余额计算器

0 个答案: