how to add html input with click on button
Question
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. The inputs should go just under the existing ones and the calculate button should move along. 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 answers
solution1
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. 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. 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.
Best of luck!
solution2
0 ACCPTED 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 . 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.