如何在不刷新的情况下运行javascript函数“live”？答案

【问题标题】：how to run javascript function 'live' without refresh?如何在不刷新的情况下运行javascript函数“live”？
【发布时间】：2018-07-17 08:56:39
【问题描述】：

我正在尝试制作一个平均成绩计算器，现在一切正常，但现在我想在其中一个字段中输入数字时立即计算平均值。我一直在尝试使用“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>

【问题讨论】：

"on(), live(), onkeyup()" 不在您的示例中，它们都是您示例中未使用的jQuery方法。

标签： javascript html average live

【解决方案1】：

使用 vanilla JavaScript，我会像这样将 eventListener 附加到输入字段

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

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

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

看到您正在使用某种动态生成的输入字段，您可以使用在计算期间用于定位它们的相同 querySelector 将侦听器添加到您的输入字段。这意味着将上面示例中的getElementById('weight-1') 替换为querySelectorAll('[id^=weight-]') 作为权重字段。

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

【讨论】：

【解决方案2】：

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

【讨论】：

这和 Angular 无关？为什么建议一个角度模块？
因为使用 Angular，您可以将表达式直接绑定到 HTML 属性，这在这里可能非常合适。我认为在这种情况下使用 angular 不是必须的，但我认为它可能会提供一个快速简单的解决方案，这就是为什么我建议...