我需要在不使用库的情况下将onchange和onload事件侦听器添加到JavaScript代码中，但首先我写的是正确的吗？我在代码中间使用和IFFY来确保变量隐私，并想知道在这种特殊情况下是否有意义。
现在我想做的就是让总开票显示“0€”或开票和上一开票的总和。
我必须在何处插入已开票和上一次已开票的onchange事件侦听器。
这里是我的小提琴http://jsfiddle.net/MMendes/gLsBG/的链接
我的HTML
<body>
<div id="content">
<table class="register">
<caption>Register</caption>
<thead>
<tr class="heads">
<th>Date</th>
<th>Route</th>
<th>Invoiced</th>
<th>Previous Invoices</th>
<th>Total Invoiced</th>
<th>Not Collected</th>
<th>Previous Not Collected</th>
<th>Consumption Expenditures</th>
<th>Other Expenditures</th>
<th>Total Route</th>
<th>Total Collected</th>
<th>Difference T.R−T.C</th>
<th>Deposited</th>
<th>In Register</th>
</tr>
</thead>
<tbody>
<tr>
<td id="date"></td>
<td>
<input type="number" id="route" class="boxed" />
</td>
<td>
<input type="number" id="invoiced" class="boxed" />€</td>
<td>
<input type="number" id="lastinvoiced" class="boxed" />€</td>
<td id="daytotal"></td>
<td>
<input type="number" id="notcollected" class="boxed" />€</td>
<td>
<input type="number" id="notcollectedlate" class="boxed" />&euro </td>
<td>
<input type="number" id="expenditure1" class="boxed" />€</td>
<td>
<input type="number" id="expenditure2" class="boxed" />€</td>
<td id="total"></td>
<td>
<input type="number" id="totalcollected" class="boxed" />&euro</td>
<td id="difference"></td>
<td>
<input type="number" id="deposite" class="boxed" />€</td>
<td id="registered"></td>
</tr>
</tbody>
</table>
</div>
</body>我的CSS
.boxed {
border-style: none;
overflow: auto;
width: 70%;
margin: 2%;
}
body {
margin: auto;
padding: 2%, 5%, 2%, 5%;
}
caption {
font-size: 2em;
font-family:"Courier";
}
table {
border-radius: 0.5em;
border-style: solid;
background: olivedrab;
}
td {
background: darkgreen;
opacity: 0.9;
width: contain;
overflow: scroll;
}我的JS
var A = {
//calculate the total invoiced for the day
calcTotalDay: function () {
//get the total invoiced for the day and set the value to 0€
var dayTotal = document.getElementById("daytotal");
if (dayTotal === "" || dayTotal === isNaN) {
dayTotal.innerHTML = "0€";
} else {
(function () {
//get the input values for invoiced and lastInvoiced "parsed as integers"
var invoiced = parseInt(document.getElementById("invoiced").value, 10);
var lastInvoiced =parseInt(document.getElementById("lastinvoiced").value, 10);
//make sure the input values are number types. If not display message demanding to insert a valid value
var type1 = typeof invoiced;
var type2 = typeof lastInvoiced;
if (type1 !== "number") invoiced.innerHTML = "Insert a valid value!";
if (type2 !== "number") lastInvoiced.innerHTML = "Insert a valid value";
//return the sum of the total by adding invoiced and lastInvoiced and adding the euro sign
if (type1 === "number" && type2 === "number") {
dayTotal = invoiced + lastInvoiced + " €";
return dayTotal;
} else {
return "invalid";
}
}());
}
}
};
1条答案
按热度按时间ubof19bj1#
在我看来，整个calcTotalDay函数（在纠正其代码之后）需要在两个字段的更改事件侦听器中运行。因此，您可以在load事件中运行整个代码，并为将运行calcTotalDay函数的相关元素添加事件侦听器。
此外，对于紧凑的跨浏览器事件侦听器添加代码，有许多示例，只需使用您最喜欢的搜索引擎。