Question

我需要在不使用库的情况下将onchange和onload事件listerners添加到我的JavaScript代码中。但首先是我写的正确吗？我在代码中间使用了IFFY来确保可变隐私，并想知道在这种特殊情况下是否有意义。

现在，我想做的就是制作全部开票显示＆＃34; 0€＆＃34;或者已开票和已开票的总和的价值。

我必须在哪里插入Invoiced和Previous Invoiced的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&#8722;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" />&euro;</td>
                <td>
                    <input type="number" id="lastinvoiced" class="boxed" />&euro;</td>
                <td id="daytotal"></td>
                <td>
                    <input type="number" id="notcollected" class="boxed" />&euro;</td>
                <td>
                    <input type="number" id="notcollectedlate" class="boxed" />&euro  </td>
                <td>
                    <input type="number" id="expenditure1" class="boxed" />&euro;</td>
                <td>
                    <input type="number" id="expenditure2" class="boxed" />&euro;</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" />&euro;</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";
            }
        }());
    }
   }
   };

Answer 1

在我看来，整个calcTotalDay函数（在更正其代码之后）需要在两个字段的change事件侦听器中运行。因此，您可以在load事件中运行整个代码，并为运行calcTotalDay函数的相关元素添加事件侦听器。

此外，对于紧凑型跨浏览器事件监听器添加代码，有很多示例，只需使用您最喜欢的搜索引擎。

在JavaScript中添加onload和onchange事件侦听器

1 个答案: