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将侦听器添加到您的输入字段中。这意味着在我上面的示例中，getElementById('weight-1')用querySelectorAll('[id^=weight-]')代替了权重字段。

此外，在处理值，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 个答案: