javascript - If and Else Function For Checkboxes -
i wanna add function checkbox user able click multiple check boxes in order perform calculations calc() function. calc() not called when user not check on boxes.
note variables in calc() functions in 1 single function (i may want refer value checkbox functions). moreover, have removed of codes due limitation of word counts, error may have encountered function run-able.
need on this.
function calc() { let arr = document.getelementsbyname('qty'); let tot = 0; (let = 0; < arr.length; i++) { let radios = document.getelementsbyname("group" + (i + 1)); (let j = 0; j < radios.length; j++) { let radio = radios[j]; if (radio.value == "yes" && radio.checked) { tot += parseint(arr[i].value); } } } //display total value of test points document.getelementbyid('total').value = tot; //calc standard hour var stdhour = ((tot * 0.85) / 3600); //display calculated value of standard hour document.getelementbyid('stdhour').value = stdhour.tofixed(4); //calculation earn hour var earnhour = ((tot * 0.85) / 3600) * document.getelementbyid('unitnum').value; //display calculated earn hour document.getelementbyid('earnhour').value = earnhour.tofixed(3); //calculate , display number of head count document.getelementbyid('hc').value = ((earnhour / 19.8) * document.getelementbyid('numdays').value).tofixed(3); //calculation number of days var earndays = ((document.getelementbyid('unitnum').value / ((document.getelementbyid('numheadc').value / stdhour) * 6.6)) / 3); //display total number of days document.getelementbyid('days').value = earndays.tofixed(3); //calculation , display output per day //document.getelementbyid('perday').value= (document.getelementbyid('unitnum').value / document.getelementbyid('days').value).tofixed(3) ; //calculation , display output per day depends on headcount per shift document.getelementbyid('perday').value = ((document.getelementbyid('numheadc').value / stdhour * 6.6) * 3).tofixed(3); document.getelementbyid('hcperday').value = ((document.getelementbyid('output').value / 19.8) * stdhour).tofixed(3); }<form id="radioform" method="get" align="center"> <table style="width:60% table-layout:fixed" align="center"> <h3> <b>initial (on arrival)</b> </h3> <table class="table1" style="width:60%" align="center"> <tr> <th>test points</th> <th colspan="4">cycle-time (seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>value</b></td> <td class="cent"><b>yes</b></td> <td class="cent"><b>no</b></td> </tr> <tr> <label id="group1"> <!--label used control respective group of radio buttons--> <td>initial (on arrival)</td> <!--the input box in 'value' column set below--> <td class="cent"><input type="text" value="20" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td> <!--the check boxes of 'yes' , 'no' created below--> <td class="cent"><input type="radio" name="group1" value="yes"></td> <td class="cent"><input type="radio" name="group1" value="no"></td> </label> </tr> <tr> <label id="group2"> <td>drop test (portable only)</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group2" value="yes"></td> <td class="cent"><input type="radio" name="group2" value="no"></td> </label> </tr> <h3> <b>extreme temperature (cold temp)</b> </h3> <table class="table2" style="width:60%" align="center"> <tr> <th>test points</th> <th colspan="4">cycle-time (seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>value</b></td> <td class="cent"><b>yes</b></td> <td class="cent"><b>no</b></td> </tr> <tr> <label id="group5"> <td>ate labview rf testing extreme</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group5" value="yes"></td> <td class="cent"><input type="radio" name="group5" value="no"></td> </label> </tr> <tr> <label id="group6"> <td>user interface extreme</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group6" value="yes"></td> <td class="cent"><input type="radio" name="group6" value="no"></td> </label> </tr> <tr> <label id="group7"> <td>mic talk internal extreme</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group7" value="yes"></td> <td class="cent"><input type="radio" name="group7" value="no"></td> </label> </tr> </table> </form> <br><br> <!---number of units---> <h4 align="center">enter number of units : <input type="text" id="unitnum"><br></h4> <br><br><br> <form id="radioform2" method="get" align="center"> <table style="width:30%" align="center"> <tr> <td>total</td> <td class="left"><input type="text" name="total" id="total" align="center" /> seconds</td> </tr> <tr> <td>standard hour</td> <td class="left"><input type="text" name="stdhour" id="stdhour" align="center" /> hour</td> </tr> <tr> <td>earn hour</td> <td class="left"><input type="text" name="earnhour" id="earnhour" /> hour</td> </tr> <tr> <td>output per day</td> <td class="left"><input type="text" name="perday" id="perday" /> per day</td> </tr> </table> </form> <!--end of form--> <br><br><br> <form id="radioform3" method="get" align="center"> <table style="width:30%" align="center"> <input type="checkbox" value="select" align="center" id="check1"> calculate number of head count when days fixed<br> <tr> <td>number of days</td> <td class="left"><input type="text" id="numdays" /></td> </tr> <tr> <td>head count</td> <td class="left"><input type="text" name="hc" id="hc" /> per shift</td> </tr> </table> </form> <!--end of form--> <br><br><br> <form id="radioform4" method="get" align="center"> <table style="width:30%" align="center"> <input type="checkbox" value="select" align="center" id="check2"> calculate number of days when head counts fixed<br> <tr> <td>number of head count</td> <td class="left"><input type="text" id="numheadc" /></td> </tr> <tr> <td>number of days</td> <td class="left"><input type="text" name="days" id="days" /> days</td> </tr> </table> </form> <!--end of form--> <br><br><br> <form id="radioform5" method="get" align="center"> <table style="width:30%" align="center"> <input type="checkbox" value="select" align="center"> calculate number of head counts according daily output<br> <tr> <td>daily output</td> <td class="left"><input type="text" id="output" /></td> </tr> <tr> <td>headcount ii</td> <td class="left"><input type="text" name="hcperday" id="hcperday" /> per shift</td> </tr> </table> </form> <!--end of form--> <br><br><br> <br><br> <form align="center"> <div id="button"><button type="button" name="button1" onclick="calc(),choice()" class="button button1">calculate</button></div> </form> <br> <form align="center" method="post" action="report.asp"> <input type="submit" value="generate report" name="action" class="button button2" /><br /><br /> </form>
add eventlistener each input field recalculate. little snippet here:
const collection = document.queryselectorall( 'input' ); ( let = 0; < collection.length; += 1 ) { collection[ ].addeventlistener( 'change', calc ); } it collects input elements , adds listener on change event.
here working example:
function calc() { let arr = document.getelementsbyname('qty'); let tot = 0; (let = 0; < arr.length; i++) { let radios = document.getelementsbyname("group" + (i + 1)); (let j = 0; j < radios.length; j++) { let radio = radios[j]; if (radio.value == "yes" && radio.checked) { tot += parseint(arr[i].value); } } } //display total value of test points document.getelementbyid('total').value = tot; //calc standard hour var stdhour = ((tot * 0.85) / 3600); //display calculated value of standard hour document.getelementbyid('stdhour').value = stdhour.tofixed(4); //calculation earn hour var earnhour = ((tot * 0.85) / 3600) * document.getelementbyid('unitnum').value; //display calculated earn hour document.getelementbyid('earnhour').value = earnhour.tofixed(3); //calculate , display number of head count document.getelementbyid('hc').value = ((earnhour / 19.8) * document.getelementbyid('numdays').value).tofixed(3); //calculation number of days var earndays = ((document.getelementbyid('unitnum').value / ((document.getelementbyid('numheadc').value / stdhour) * 6.6)) / 3); //display total number of days document.getelementbyid('days').value = earndays.tofixed(3); //calculation , display output per day //document.getelementbyid('perday').value= (document.getelementbyid('unitnum').value / document.getelementbyid('days').value).tofixed(3) ; //calculation , display output per day depends on headcount per shift document.getelementbyid('perday').value = ((document.getelementbyid('numheadc').value / stdhour * 6.6) * 3).tofixed(3); document.getelementbyid('hcperday').value = ((document.getelementbyid('output').value / 19.8) * stdhour).tofixed(3); } const collection = document.queryselectorall( 'input' ); ( let = 0; < collection.length; += 1 ) { collection[ ].addeventlistener( 'change', calc ); }<form id="radioform" method="get" align="center"> <table style="width:60% table-layout:fixed" align="center"> <h3> <b>initial (on arrival)</b> </h3> <table class="table1" style="width:60%" align="center"> <tr> <th>test points</th> <th colspan="4">cycle-time (seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>value</b></td> <td class="cent"><b>yes</b></td> <td class="cent"><b>no</b></td> </tr> <tr> <label id="group1"> <!--label used control respective group of radio buttons--> <td>initial (on arrival)</td> <!--the input box in 'value' column set below--> <td class="cent"><input type="text" value="20" align="center" name="qty" id="qty1" maxlength="6" size="4"/></td> <!--the check boxes of 'yes' , 'no' created below--> <td class="cent"><input type="radio" name="group1" value="yes"></td> <td class="cent"><input type="radio" name="group1" value="no"></td> </label> </tr> <tr> <label id="group2"> <td>drop test (portable only)</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group2" value="yes"></td> <td class="cent"><input type="radio" name="group2" value="no"></td> </label> </tr> <h3> <b>extreme temperature (cold temp)</b> </h3> <table class="table2" style="width:60%" align="center"> <tr> <th>test points</th> <th colspan="4">cycle-time (seconds)</th> </tr> <tr> <td></td> <td class="cent"><b>value</b></td> <td class="cent"><b>yes</b></td> <td class="cent"><b>no</b></td> </tr> <tr> <label id="group5"> <td>ate labview rf testing extreme</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty5" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group5" value="yes"></td> <td class="cent"><input type="radio" name="group5" value="no"></td> </label> </tr> <tr> <label id="group6"> <td>user interface extreme</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty6" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group6" value="yes"></td> <td class="cent"><input type="radio" name="group6" value="no"></td> </label> </tr> <tr> <label id="group7"> <td>mic talk internal extreme</td> <td class="cent"><input type="text" value="60" align="center" name="qty" id="qty7" maxlength="6" size="4" /></td> <td class="cent"><input type="radio" name="group7" value="yes"></td> <td class="cent"><input type="radio" name="group7" value="no"></td> </label> </tr> </table> </form> <br><br> <!---number of units---> <h4 align="center">enter number of units : <input type="text" id="unitnum"><br></h4> <br><br><br> <form id="radioform2" method="get" align="center"> <table style="width:30%" align="center"> <tr> <td>total</td> <td class="left"><input type="text" name="total" id="total" align="center" /> seconds</td> </tr> <tr> <td>standard hour</td> <td class="left"><input type="text" name="stdhour" id="stdhour" align="center" /> hour</td> </tr> <tr> <td>earn hour</td> <td class="left"><input type="text" name="earnhour" id="earnhour" /> hour</td> </tr> <tr> <td>output per day</td> <td class="left"><input type="text" name="perday" id="perday" /> per day</td> </tr> </table> </form> <!--end of form--> <br><br><br> <form id="radioform3" method="get" align="center"> <table style="width:30%" align="center"> <input type="checkbox" value="select" align="center" id="check1"> calculate number of head count when days fixed<br> <tr> <td>number of days</td> <td class="left"><input type="text" id="numdays" /></td> </tr> <tr> <td>head count</td> <td class="left"><input type="text" name="hc" id="hc" /> per shift</td> </tr> </table> </form> <!--end of form--> <br><br><br> <form id="radioform4" method="get" align="center"> <table style="width:30%" align="center"> <input type="checkbox" value="select" align="center" id="check2"> calculate number of days when head counts fixed<br> <tr> <td>number of head count</td> <td class="left"><input type="text" id="numheadc" /></td> </tr> <tr> <td>number of days</td> <td class="left"><input type="text" name="days" id="days" /> days</td> </tr> </table> </form> <!--end of form--> <br><br><br> <form id="radioform5" method="get" align="center"> <table style="width:30%" align="center"> <input type="checkbox" value="select" align="center"> calculate number of head counts according daily output<br> <tr> <td>daily output</td> <td class="left"><input type="text" id="output" /></td> </tr> <tr> <td>headcount ii</td> <td class="left"><input type="text" name="hcperday" id="hcperday" /> per shift</td> </tr> </table> </form> <!--end of form--> <br><br><br> <br><br> <form align="center"> <div id="button"><button type="button" name="button1" onclick="calc(),choice()" class="button button1">calculate</button></div> </form> <br> <form align="center" method="post" action="report.asp"> <input type="submit" value="generate report" name="action" class="button button2" /><br /><br /> </form>
Comments
Post a Comment