Question

我正试图做一个平均成绩计算器，现在可以了，但是现在我想每次单击按钮时添加一行输入，包括html，javascript和分配的数字都增加一个。输入应位于现有输入的正下方，并且calculate按钮应随之移动。我现在在这里停留了几天，非常感谢您的帮助！

function getValue(el){
    return (+document.getElementById(el).value)
};
 
function calculator()  {    
  var weight1=getValue('weight-1');
    var mark1=getValue('mark-1');
    var grade1=weight1*mark1;

    var weight2=getValue('weight-2');
    var mark2=getValue('mark-2');
    var grade2=weight2*mark2;

   

  var totalWeight=weight1+weight2;
  var totalGrade=grade1+grade2;

  var finalGrade=totalGrade/totalWeight;
  var display=document.getElementById('outputDiv');


display.innerHTML='Je gemiddelde is: ' +finalGrade.toFixed(2);
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: ;
}
 
h2, h3 {
  text-align: center;
}

table {
  margin: auto;
}

#table-title {
  font-size: 20px;
  font-style: italic;
  text-align: center;
  position: relative;
}

#weight-1, #weight-2 {
  width: 100px;
}

input {
  text-align: center;
}

#button-div {
  position: relative;
  width: 150px;
  margin: auto;
}

#calc-button {
  position: relative;
  padding: 5px;
  margin-top: 20px;
}
#calc-button: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);
}

#outputDiv {
  height: 50px;
  text-align: center;
  width: 300px;
  margin: auto;
  margin-top: 20px;
}

<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 maxlength="5" value=""></td>
      <td><input id="mark-1" type="text" size=2 maxlength="5" value=""></td>
    </tr>

    <tr>
      <td><input id="weight-2" type="text" size=2 maxlength="5" value=""></td>
      <td><input id="mark-2" type="text" size=2 maxlength="5" value=""></td>
    </tr>
    
  </table>
  <div id="button-div">
    <input id="calc-button" type="button" value="Berekenen je gemiddelde" onclick="calculator()">
  </div>
  <div id="outputDiv"></div>
</body>
</html>

Answer 1

关于您的问题，正如Barmar所说，StackOverflow要求用户至少尝试一下问题，当您碰壁时，您可以提出要求。我不能否认这一点，所以我不能给您实际的代码，但是我确实设法使其迅速运行，如果您了解Javascript，那就不难了。我将尝试向您提示它的真正结构。

您的Javascript需要从头开始添加所有表单输入，将变量设置为0，然后只需在按钮上附加，然后在id =“ table”上单击一个新的输入字段，然后递增1。我”可以亲自去看，但是如果您向我证明自己曾尝试过，那么我绝对可以从那里为您提供帮助。

祝你好运！

Answer 2

您可以使用querySelectoryAll来获得权重并标记输入，而不用硬编码输入的ID，无论输入多少，都可以得到所有输入，然后可以遍历元素以获取值，然后将新的ID为1的输入行附加到tbody。然后，下次您调用该函数时，将有另外一个输入循环。这是基于您的代码的示例：

 
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('outputDiv');
  var newTr = document.createElement('TR');
  newTr.innerHTML = `<td><input id="weight-${trs.length + 1}" type="text" size=2 maxlength="5" value=""></td><td><input id="mark-${trs.length + 1}" type="text" size=2 maxlength="5" value=""></td>`
  tBody.appendChild(newTr);
  display.innerHTML='Je gemiddelde is: ' +finalGrade.toFixed(2);
}

body {
  font-family: 'Roboto', sans-serif;
  background-color: ;
}
 
h2, h3 {
  text-align: center;
}

table {
  margin: auto;
}

#table-title {
  font-size: 20px;
  font-style: italic;
  text-align: center;
  position: relative;
}

[id^="weight-"] {
  width: 100px;
}

input {
  text-align: center;
}

#button-div {
  position: relative;
  width: 150px;
  margin: auto;
}

#calc-button {
  position: relative;
  padding: 5px;
  margin-top: 20px;
}
#calc-button: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);
}

#outputDiv {
  height: 50px;
  text-align: center;
  width: 300px;
  margin: auto;
  margin-top: 20px;
}

<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 maxlength="5" value=""></td>
      <td><input id="mark-1" type="text" size=2 maxlength="5" value=""></td>
    </tr>

    <tr>
      <td><input id="weight-2" type="text" size=2 maxlength="5" value=""></td>
      <td><input id="mark-2" type="text" size=2 maxlength="5" value=""></td>
    </tr>
    
  </table>
  <div id="button-div">
    <input id="calc-button" type="button" value="Berekenen je gemiddelde" onclick="calculator()">
  </div>
  <div id="outputDiv"></div>
</body>
</html>

如何通过单击按钮添加html输入

2 个答案: