如何不刷新就运行javascript函数“实时”？

Question

我试图制作一个平均成绩计算器，现在可以了，但是现在我想在一个字段中输入数字时立即计算平均值。 我一直在尝试使用“ on（），live（），onkeyup（）”，但无法使其正常工作。

现在，平均结果显示在按钮上的“ onclick”输入字段下方。 我希望在其中显示平均值，但是一旦您在其中一个字段中输入数字，它便应该显示在这里，就像现在onclick之后一样。

我尝试使用“ on（），live（），onkeyup（）”的方法是将它们连接到输入字段，并将它们连接到Calculator（）函数。

有没有简单的方法可以执行此操作或其他特定方法？ 问候。

 function calculator() { var weight = 0; var mark = 0; var weights = document.querySelectorAll('[id^=weight-]'); var grades = document.querySelectorAll('[id^=mark-]'); var trs = document.getElementsByTagName('tr'); var tBody = document.getElementsByTagName('tbody')[0]; var totalWeight = 0; var totalGrade = 0; for (var i = 0; i < weights.length; i++) { totalWeight += +weights[i].value; } for (var i = 0; i < grades.length; i++) { totalGrade += +grades[i].value; } var finalGrade=totalGrade/totalWeight; var display = document.getElementById('output-div'); var newTr = document.createElement('TR'); newTr.innerHTML = `<td><input id="weight-${trs.length + 1}" type="text" size=2 value=""></td><td><input id="mark-${trs.length + 1}" type="text" size=2 value=""></td>`; tBody.appendChild(newTr); display.innerHTML='Je gemiddelde is: ' +finalGrade.toFixed(2); }

 html { background-color: ; } header { background-color: ; } h2 { text-align: center; } h3 { text-align: center; } body { font-family: 'Roboto', sans-serif; } table { margin: auto; } tr { background-color: ; } td { background-color: ; } #table-title { font-size: 20px; font-style: italic; text-align: center; position: relative; } input { text-align: center; } [id^="mark"] { width: 100px; } [id^="weight"] { width: 100px; } #calc-btn-div { position: relative; width: 150px; margin: auto; } #calc-btn { position: relative; padding: 5px; margin-top: 20px; } #calc-btn:hover { border-color: black; box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } /* #add-input-div { height: 50px; text-align: center; width: 300px; margin: auto; margin-top: 20px; } #add-input-btn { position: relative; padding: 5px; margin-top: 20px; } #add-input-btn:hover { border-color: black; box-shadow: 8px 8px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); } */ #output-div { background-color: ; height: 50px; text-align: center; width: 300px; margin: auto; margin-top: 20px; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */ .modal-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 80%; /* Could be more or less, depending on screen size */ } /* The Close Button */ .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: black; text-decoration: none; cursor: pointer; }

 <html> <head> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> </head> <header> <h2>Gemiddelde cijfer</h2> <h3>Voer hieronder je cijfers in</h3> </header> <body> <table id="table"> <tr id="table-title"> <td>Weging</td> <td>Cijfer</td> </tr> <tr> <td><input id="weight-1" type="text" size=2 value=""></td> <td><input id="mark-1" type="text" size=2 value=""></td> </tr> </table> <div id="calc-btn-div"> <input id="calc-btn" type="button" value="Berekenen je gemiddelde" onclick="calculator()"> </div> <!-- <div id="add-input-div"> <input id="add-input-btn" type="button" value="Voeg cijfer toe" onclick="addInput()"> </div> --> <div id="output-div"></div> </body> </html>

Answer 1

使用香草JavaScript，我会将eventListener附加到这样的输入字段

document.getElementById('weight-1').addEventListener('change',function(){
    calculator();
});

document.getElementById('mark-1').addEventListener('change',function(){
    calculator();
});

这些addEventListener函数将侦听器添加到“输入”字段的预定义“更改”事件中，并触发Calculator（）； 您的代码中的功能。

看到您正在使用某种动态生成的输入字段，可以使用在计算过程中将它们用作目标的同一querySelector将侦听器添加到您的输入字段中。 这将意味着在上面的示例中，用querySelectorAll('[id^=weight-]')代替getElementById('weight-1') 。

另外，在处理值，IO和html与JavaScript之间的计算时，我建议使用类似jQuery的库。 jQuery大大简化了这些过程。 这是jQuery替代onClick函数的文档： https : //api.jquery.com/change/

Answer 2

我认为您可以使用angularJS模块来做到这一点。 看一下本教程： https : //www.w3schools.com/angular/angular_modules.asp也许会有所帮助。

如何不刷新就运行javascript函数“实时”？

问题描述

2 个解决方案

解决方案1
1 2018-07-17 09:02:12

解决方案2
-1 2018-07-17 09:21:57

如何不刷新就运行javascript函数“实时”？

问题描述

2 个解决方案

解决方案1 1 2018-07-17 09:02:12

解决方案2 -1 2018-07-17 09:21:57

解决方案1
1 2018-07-17 09:02:12

解决方案2
-1 2018-07-17 09:21:57