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

【问题标题】：how to add html input with click on button如何通过单击按钮添加html输入
【发布时间】：2018-07-16 21:52:38
【问题描述】：

我正在尝试制作一个平均成绩计算器，现在一切正常，但现在我想在每次单击按钮时添加一行输入，包括 html、javascript 以及分配的数字加一。输入应该在现有输入的下方，并且计算按钮应该移动。我已经在这一点上停留了几天，感谢您的帮助！

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>

【问题讨论】：

StackOverflow 不是免费的编码服务。所以希望你try to solve your own problem first。请更新您的问题以在minimal reproducible example 中显示您已经尝试过的内容。如需更多信息，请参阅How to Ask，并拨打tour :)

标签： javascript html css button input

【解决方案1】：

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

 
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>

【讨论】：

【解决方案2】：

关于您的问题，正如 Barmar 所说，StackOverflow 要求用户至少尝试解决问题，当您遇到墙壁时，您可以询问。我不能否决这一点，所以我不能给你实际的代码，但我确实设法让它很快工作，如果你理解 Javascript，它应该不会那么困难。我将尝试为您提供有关它应该如何构建的提示。

您的 Javascript 需要从头开始附加所有表单输入，设置一个等于 0 的变量，然后单击按钮将一个新的输入字段附加到 id="table" 上并递增 1。这是“我个人可以去，但如果你告诉我你尝试过，我可以从那里最明确地帮助你。

祝你好运！

【讨论】：