如何通过单击按钮添加html输入
[英]how to add html input with click on button
问题描述
im trying to make a average grade calculator, now thats is going fine but now i want to add a row of inputs every time you click on a button, including html, javascript and also the assigned numbers increased by one. 
即时通讯试图做一个平均成绩计算器，这一切都很好，但现在我想每次单击按钮时都添加一行输入，包括html，javascript以及分配的数字增加一。 The inputs should go just under the existing ones and the calculate button should move along. 输入应位于现有输入的正下方，并且calculate按钮应随之移动。 I've been stuck at this point for a view days now, appreciate the help! 我现在在这里停留了几天，感谢您的帮助！
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>
2 个解决方案
解决方案1
0 2018-07-16 22:11:39
regarding your question and as Barmar said, StackOverflow requires the user to at least attempt the problem, when you run into a wall then you can ask away. 关于您的问题，正如Barmar所说，StackOverflow要求用户至少尝试解决问题，当您碰壁时，您可以提出要求。 I can't overrule this so I can't give you the actual code but I did manage to get it working quite quickly, if you understand Javascript it shouldn't be that difficult. 我不能否认这一点，所以我不能给您实际的代码，但是我确实设法使其迅速运行，如果您了解Javascript，那就不难了。 I will try to give you hints on how it really should be structured. 我将尝试为您提供有关如何真正构造它的提示。
Your Javascript needs to append all your form inputs from the beginning, set a variable equal to 0 and just append on button click a new input field onto the id="table" and increment by 1. This is as far as "I" personally can go to but if you show me that you attempted I can most definitively help you from there. 您的Javascript需要从头开始添加所有表单输入，设置一个等于0的变量，然后在按钮上添加附加内容，然后在id =“ table”上单击一个新的输入字段，然后递增1。就我个人而言，这就是“ I”可以去，但如果您向我证明您已尝试过，我绝对可以从那里为您提供帮助。
Best of luck! 祝你好运！
解决方案2
0 已采纳 2018-07-16 22:52:20
Instead of hard coding the ids of your inputs, you can get your weight and mark inputs with querySelectoryAll this will get you all your inputs no matter how many there are and then you can loop over the elements to get the values and then append a new input row with the id incremented by 1 to the tbody . 无需对输入的ID进行硬编码，您可以使用querySelectoryAll获得权重并标记输入，无论输入多少，都可以获取所有输入，然后可以遍历元素以获取值，然后附加一个新值。输入行，其id向tbody递增1。 Then the next time you call the function there will be one more input to loop over Here's an example based on your code: 然后，下次您调用该函数时，将有另一个输入要循环。这是一个基于您的代码的示例：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.