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

Adding onload and onchange event listeners in JavaScript

本文关键字：onchange 事件监听器 onload JavaScript 添加更新时间：2023-09-26

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

现在我想做的是使总发票显示"0€"或"已发票"与"前一次发票"之和。

我必须在哪里为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";
            }
        }());
    }
   }
   };

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

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