I want to add in a few formulas into a function called Calc(). I've managed to do the calculation for the total and standard hour. I need help in adding the calculations as the following formula.
Earn Hour = stdHour * Number of Tables
People = (Earn Hour / 6.6) * Number of Days
Earn Days = Number of Tables / (Number of Head Count / stdHour)
Note : Number of Tables, Number of Days and Number of Head Count are user inputs.
function findSum() {
var hour = 6.6;
var shift = 3.0;
document.getElementById('capacity').value = Math.round(hour * shift);
}
function Calc() {
//I want to add the variable of `earnHour`, `people` and `earnDays` here
let arr = document.getElementsByName('qty');
let tot = 0;
for (let i = 0; i < arr.length; i++) {
let radios = document.getElementsByName("group" + (i + 1));
for (let j = 0; j < radios.length; j++) {
let radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
document.getElementById('total').value = Math.round(tot);
var stdHour = document.getElementById('stdHour').value = ((tot * 1.15) / 60);
//I do not know how to reference the input box values from `HTML` to here.
}
<head>
<style>
<!--Table designing-->table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 40%;
text-align: center;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 2px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
text-align: center;
}
#button {
width: 200px margin: auto;
text-align: center;
margin: 10px;
}
</style>
</head>
<body>
<div id="showdata" align="center"></div>
<br/>
<br/>
<br/>
<form id="radioForm" method="get" align="center">
<td align="center">Number of Tables : <input type="text" name="tableNum"><br></td>
<td align="center">Number of Days : <input type="text" name="days"><br></td>
<td align="center">Number of Head Count : <input type="text" name="headC"><br></td>
<table style="width:70%" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<tr>
<th>Food</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td>Edit</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>On Arrival</td>
<!--The input box in the 'Edit' column is set as below-->
<td><input type="text" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td><input type="radio" name="group1" value="Yes"></td>
<td><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Food Test</td>
<td><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
<td><input type="radio" name="group2" value="Yes"></td>
<td><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Cleaniness</td>
<td><input type="text" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
<td><input type="radio" name="group3" value="Yes"></td>
<td><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>Stock</td>
<td><input type="text" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
<td><input type="radio" name="group4" value="Yes"></td>
<td><input type="radio" name="group4" value="No"></td>
</label>
</tr>
<tr>
<td>Total (seconds)</td>
<td><input type="text" name="total" id="total" /></td>
</tr>
<tr>
<td>Standard Hour</td>
<td><input type="text" name="stdHour" id="stdHour" /></td>
</tr>
<tr>
<td>Earn Hour</td>
<td><input type="text" name="earnHour" id="earnHour" /></td>
</tr>
<tr>
<td>Capacity</td>
<td><input type="text" name="capacity" id="capacity" /></td>
</tr>
<tr>
<td>People</td>
<td><input type="text" name="hc" id="hc" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td><input type="text" name="days" id="days" /></td>
</tr>
</table>
</form>
<!--End of Form-->
</br>
<div id="button" align="center"><button type="button" align="center" onClick="Calc(),findSum()">Calculate</button></div>
</body>
I believe this is the answer that you are looking for.
You were close, and could just use the .value JavaScript attribute to get the values of the user's inputs.
I also changed the inputs from type="text" to type="number" as this would solve some possible errors.
Though improvements could be made to the JavaScript below, I hope that this is understandable to you.
function findSum() {
var hour = 6.6;
var shift = 3.0;
document.getElementById('capacity').value = Math.round(hour * shift);
}
function calc() {
//I want to add the variable of `earnHour`, `people` and `earnDays` here
let arr = document.getElementsByName('qty');
let tot = 0;
for (let i = 0; i < arr.length; i++) {
let radios = document.getElementsByName("group" + (i + 1));
for (let j = 0; j < radios.length; j++) {
let radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
document.getElementById('total').value = Math.round(tot);
var stdHour = ((tot * 1.15) / 60);
document.getElementById('stdHour').value = stdHour;
var earnHour = ((tot * 1.15) / 60) * document.getElementById('numTables').value;
document.getElementById('earnHour').value = earnHour;
document.getElementById('hc').value = (earnHour / 6.6) * document.getElementById('numDays').value;
// Calculated earnDays, but unaware where you want this value to go.
var earnDays = (document.getElementById('numTables').value / (document.getElementById('numHeadCount').value /stdHour));
console.log(earnDays);
}
<!--Table designing-->
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 40%;
text-align: center;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 2px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
text-align: center;
}
#button {
width: 200px margin: auto;
text-align: center;
margin: 10px;
}
<head>
</head>
<body>
<div id="showdata" align="center"></div>
<br/>
<br/>
<br/>
<form id="radioForm" align="center">
<td align="center">Number of Tables : <input type="text" id="numTables"><br></td>
<td align="center">Number of Days : <input type="text" id="numDays"><br></td>
<td align="center">Number of Head Count : <input type="text" id="numHeadCount"><br></td>
<table style="width:70%" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<tr>
<th>Food</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td>Edit</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>On Arrival</td>
<!--The input box in the 'Edit' column is set as below-->
<td><input type="text" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td><input type="radio" name="group1" value="Yes"></td>
<td><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Food Test</td>
<td><input type="number" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
<td><input type="radio" name="group2" value="Yes"></td>
<td><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Cleaniness</td>
<td><input type="number" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
<td><input type="radio" name="group3" value="Yes"></td>
<td><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>Stock</td>
<td><input type="number" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
<td><input type="radio" name="group4" value="Yes"></td>
<td><input type="radio" name="group4" value="No"></td>
</label>
</tr>
<tr>
<td>Total (seconds)</td>
<td><input type="number" name="total" id="total" /></td>
</tr>
<tr>
<td>Standard Hour</td>
<td><input type="number" name="stdHour" id="stdHour" /></td>
</tr>
<tr>
<td>Earn Hour</td>
<td><input type="number" name="earnHour" id="earnHour" /></td>
</tr>
<tr>
<td>Capacity</td>
<td><input type="number" name="capacity" id="capacity" /></td>
</tr>
<tr>
<td>People</td>
<td><input type="number" name="hc" id="hc" /></td>
</tr>
<tr>
<td>Number of Days</td>
<td><input type="number" name="days" id="days" /></td>
</tr>
</table>
</form>
<!--End of Form-->
</br>
<div id="button" align="center"><button type="button" align="center" onClick="calc(),findSum()">Calculate</button></div>
</body>
Related
I have a table and each row of the table has a checkbox, textbox and name field.
Following is the html
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
<td>Name</td>
<td><input type="text" name="factor" style="text-align: center;" maxlength="3" size="3" value="NA"></td>
</tr>
i want to read the value as soon as it is entered in any of the text box with name = position
Please Have a look
$("input[name='position']").keyup(function() {
var valueOfInput = $(this).val(); //value
var indexOfTr = $(this).parents('tr').index(); //index
console.log(valueOfInput, '-->', indexOfTr);
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="w" /></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</table>
you can use name as array and make common class name for input field...
hope it work...
$('.myclassname').on("keyup",function(){
var row_index = $(this).closest("tr").index();
// row_index = row_index-1; // if you have tr header then enable this also...
var textvalue = $("[name='position[]']").eq(row_index).val();
alert(textvalue);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
<tbody>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="NA" /></td>
<td></td>
</tr>
<tr>
<td><input type="checkbox" name="visible" id="soil_row_cb" checked></td>
<td><input type="text" name="position[]" class="myclassname" style="text-align: center;" maxlength="3" size="3" value="s" /></td>
<td>Name</td>
</tr>
</tbody>
</table>
Is there a way that I can change the style of a selected row, to whatever with a checkbox selection. The styles will change for the selected rows when the "click me" button is selected. I am able to delete the rows (with another button), but not change the styles of the selected rows. The rows will either be deleted or the style will change.
Can someone assist me, or show me in the right direction for the styling issue?
HTML:
<input class="dent" type="button" value="style">
<input class="delBtn" type="button" value="Delete">
<table>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
<tr>
<td style="width: 20px;">
<input type="checkbox" class="chk">
</td>
<td><input type="text"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr><br>
</table>
JS to delete a row
function delBoxes() {
let boxes = document.getElementsByClassName('chk');
for (let i = 0; i < boxes.length; i++) {
let box = boxes[i];
if (box.checked) {
let rowTag = box.parentNode.parentNode;
let tableTag = box.parentNode.parentNode.parentNode;
tableTag.removeChild(rowTag);
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
I have made a few changes to your HTML, adding ID's for the buttons and rows. Also I added data-sets to the check boxes so you can know which rows to execute the task (change style or remove)
function delBoxes() {
let boxes = document.getElementsByClassName('chk');
for (let i = boxes.length - 1; i >= 0; i--) {
let box = boxes[i];
if (box.checked) {
let rowTag = document.getElementById(box.dataset.row);
rowTag.parentNode.removeChild(rowTag);
}
}
}
function style() {
let boxes = document.getElementsByClassName('chk');
for (let i = boxes.length - 1; i >= 0; i--) {
let box = boxes[i];
if (box.checked) {
let rowTag = document.getElementById(box.dataset.row);
rowTag.style.backgroundColor = "red";
}
}
}
document.getElementById("deleteButton").addEventListener("click", delBoxes);
document.getElementById("styleButton").addEventListener("click", style);
<input class="dent" type="button" value="style" id="styleButton">
<input class="delBtn" type="button" value="Delete" id="deleteButton">
<table>
<tr id="row1">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row1">
</td>
<td><input type="text" value="I am 1"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr id="row2">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row2">
</td>
<td><input type="text" value="I am 2"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr id="row3">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row3">
</td>
<td><input type="text" value="I am 3"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
<tr id="row4">
<td style="width: 20px;">
<input type="checkbox" class="chk" data-row="row4">
</td>
<td><input type="text" value="I am 4"></td>
<td><input type="text"></td>
<td><input type="text"></td>
</tr>
</table>
I have a table which has a checkbox in the first column (in a <td> element) of every row. When this is checked, the rest of the columns in that row will be displayed.
I have read several articles on this topic with some great examples but can't achieve exactly what I want. I had been able to hide the rest of the <td> elements using css but not been able to make it visible.
I understand this is possible with JavaScript but I am not well versed in it. Any help is highly appreciated.
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>
Using jQuery:
$(document).ready(function() {
$("tr td:first-child :checkbox").change(function() {
var checkboxes = $(this).parent().siblings("td").children(":checkbox");
var containers = $(this).parent().siblings("td:not(first-child)");
if (this.checked) {
containers.css('visibility', 'visible');
checkboxes.prop("checked", true);
} else {
containers.css('visibility', 'hidden');
checkboxes.prop("checked", false);
}
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable><input type="checkbox" name="level3" value="3" /></td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable><input type="checkbox" name="level4" value="4" /></td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>
Using only JS:
var primaryCheckboxes = document.querySelectorAll("tr td:first-child input[type=checkbox]");
Array.from(primaryCheckboxes).forEach(checkbox => {
checkbox.addEventListener("click", function(event) {
var secondaryCheckboxes = this.parentElement.parentElement.querySelectorAll("input[type=checkbox]");
var checkedSatus = false,
visibilityStatus = "hidden";
if (this.checked) {
checkedSatus = true;
visibilityStatus = "visible";
}
Array.from(secondaryCheckboxes).forEach(checkbox => {
if (checkbox !== this) {
checkbox.checked = checkedSatus;
checkbox.parentElement.style.visibility = visibilityStatus;
}
});
});
});
table {
width: 300px;
}
table td {
min-width: 150px;
border: 1px solid;
text-align: center;
padding: 5px;
}
table td lable {
margin-right: 10px;
}
.L3,
.L4,
.L5 {
visibility: hidden
}
<form method="post" action="#">
<table>
<tr>
<th>Year</th>
<th>Thank You Letter</th>
<th>Pennant</th>
<th>Trophy</th>
<th>Medal</th>
<th>Book Voucher</th>
</tr>
<tr>
<td>
<lable>Level 3</lable>
<input type="checkbox" name="level3" value="3" />
</td>
<td class="L3"><input type="checkbox" name="tu3" value="1" /></td>
<td class="L3"><input type="checkbox" name="pen3" value="1" /></td>
<td class="L3"><input type="checkbox" name="trp3" value="1" /></td>
<td class="L3"><input type="checkbox" name="med3" value="1" /></td>
<td class="L3"><input type="checkbox" name="bkv3" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 4</lable>
<input type="checkbox" name="level4" value="4" />
</td>
<td><input type="checkbox" name="tu4" value="1" /></td>
<td><input type="checkbox" name="pen4" value="1" /></td>
<td><input type="checkbox" name="trp4" value="1" /></td>
<td><input type="checkbox" name="med4" value="1" /></td>
<td><input type="checkbox" name="bkv4" value="1" /></td>
</tr>
<tr>
<td>
<lable>Level 5</lable><input type="checkbox" name="level5" value="5" /></td>
<td><input type="checkbox" name="tu5" value="1" /></td>
<td><input type="checkbox" name="pen5" value="1" /></td>
<td><input type="checkbox" name="trp5" value="1" /></td>
<td><input type="checkbox" name="med5" value="1" /></td>
<td><input type="checkbox" name="bkv5" value="1" /></td>
</tr>
</table>
</form>
I have a situation where a few calculations were to be performed. I have created a few lines of formula to calculate the scenarios in Calc() function.
The calculations are working fine but I am having issue with the NaNoutput. When I do not input anything and click on the Calculate button, the text box shows an output of NaN. I understand that NaN indicates Not A Number but I am helpless in solving this issue.
I would want an output of 0.00 instead of NaN. Need help on this.
function Calc() {
let arr = document.getElementsByName('qty');
let tot = 0;
for (let i = 0; i < arr.length; i++) {
let radios = document.getElementsByName("group" + (i + 1));
for (let j = 0; j < radios.length; j++) {
let radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
document.getElementById('total').value = tot;
var stdHour = ((tot * 1.15) / 3600);
document.getElementById('stdHour').value = stdHour.toFixed(4);
var earnHour = ((tot * 1.15) / 3600) * document.getElementById('unitNum').value;
document.getElementById('earnHour').value = earnHour.toFixed(3);
document.getElementById('hc').value = ((earnHour / 19.8) * document.getElementById('numDays').value).toFixed(3);
var earnDays = ((document.getElementById('unitNum').value / ((document.getElementById('numHeadC').value / stdHour) * 6.6)) / 3);
document.getElementById('days').value = earnDays.toFixed(3);
document.getElementById('perday').value = ((document.getElementById('numHeadC').value / stdHour * 6.6) * 3).toFixed(1);
document.getElementById('hcperday').value = ((document.getElementById('output').value / 19.8) * stdHour).toFixed(3);
}
<h3>
<B>Extreme Temperature (Cold Temp)</B>
</h3>
<table class="table2" style="width:60%" align="center">
<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="153" align="center" name="qty" id="qty5" maxlength="6" size="4" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group5" value="Yes" checked="checked"></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="0" align="center" name="qty" id="qty6" maxlength="6" size="4" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group6" value="Yes"></td>
<td class="cent"><input type="radio" name="group6" value="No" checked="checked"></td>
</label>
</tr>
<tr>
<label id="group7">
<td>Mic Talk Internal Extreme</td>
<td class="cent"><input type="text" value="68" align="center" name="qty" id="qty7" maxlength="6" size="4" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group7" value="Yes" checked="checked"></td>
<td class="cent"><input type="radio" name="group7" value="No"></td>
</label>
</tr>
<tr>
<label id="group8">
<td>Mic Talk External Extreme</td>
<td class="cent"><input type="text" value="53" align="center" name="qty" id="qty8" maxlength="4" size="4" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group8" value="Yes" checked="checked"></td>
<td class="cent"><input type="radio" name="group8" value="No"></td>
</label>
</tr>
<tr>
<label id="group9">
<td>Desense Test</td>
<td class="cent"><input type="text" value="50" align="center" name="qty" id="qty9" maxlength="6" size="4" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group9" value="Yes" checked="checked"></td>
<td class="cent"><input type="radio" name="group9" value="No"></td>
</label>
</tr>
<tr>
<label id="group10">
<td>Tx Stability</td>
<td class="cent"><input type="text" value="43" align="center" name="qty" id="qty10" maxlength="6" size="4" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group10" value="Yes" checked="checked"></td>
<td class="cent"><input type="radio" name="group10" value="No"></td>
</label>
</tr>
<tr>
<label id="group11">
<td>Microphonic Test</td>
<td class="cent"><input type="text" value="60" align="center" name="qty" id="qty11" maxlength="6" size="4" readonly="readonly"/></td>
<td class="cent"><input type="radio" name="group11" value="Yes" checked="checked"></td>
<td class="cent"><input type="radio" name="group11" value="No"></td>
</label>
</tr>
</table>
<br><br>
<!---Number of units--->
<br><br>
<table class="resultsTbl">
<tr>
<th colspan="2">
<h4>Enter The Number of Units : <input type="text" id="unitNum"></h4>
</th>
</tr>
<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>
</table>
<br><br>
<!--Scenario 1-->
<table class="resultsTbl">
<tr>
<th colspan="2" class="scenario1"><input type="checkbox" value="select" align="center" id="check1"> Scenario 1</th>
</tr>
<tr>
<td colspan="2" class="cent">Calculate The Number of Head Count When Days Are Fixed</td>
</tr>
<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>
<br><br>
<!--End of Form For Scenario 1-->
<table class="resultsTbl">
<tr>
<th colspan="2" class="scenario2"><input type="checkbox" value="select" align="center" id="check2"> Scenario 2</th>
</tr>
<tr>
<td colspan="2" class="cent">Calculate The Number of Days When Head Counts Are Fixed</td>
</tr>
<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>
<tr>
<td>Output Per Day</td>
<td class="left"><input type="text" name="perday" id="perday" /> Per Day</td>
</tr>
</table>
<br><br>
<table class="resultsTbl">
<tr>
<th colspan="2" class="scenario3"><input type="checkbox" value="select"> Scenario 3</th>
</tr>
<tr>
<td colspan="2" class="cent">Calculate The Number of Head Counts According to The Daily Output</td>
</tr>
<tr>
<td>Daily Output</td>
<td class="left"><input type="text" id="output" /></td>
</tr>
<tr>
<td>HC 2</td>
<td class="left"><input type="text" name="hcperday" id="hcperday" /> Per Shift</td>
</tr>
</table>
<br><br><br>
<form align="center">
<div id="button"><button type="button" name="button1" onClick="Calc()" class="button button1">Calculate</button></div>
</form>
You can give your value a default value. i.e
var earnDays = ((document.getElementById('unitNum').value / ((document.getElementById('numHeadC').value / stdHour) * 6.6)) / 3) || 0.0;
The result NaN has come from division by zero at this line [ just did an indentation to spot easily ]
var earnDays = ((
document.getElementById('unitNum').value /
((document.getElementById('numHeadC').value / stdHour) *6.6)
)
/ 3 );
In chrome devtools, You can find this by putting a break point and then selecting the expression by your mouse to see the value
So, you have to code the logic to find the earnDays when document.getElementById('numHeadC').value is '' (emty string) which converts to 0.
like this as you wanted to be 0.0 :
var earnDays = 0.0;
if (document.getElementById('numHeadC').value)
earnDays = ((document.getElementById('unitNum').value / ((document.getElementById('numHeadC').value / stdHour) * 6.6)) / 3);
I'm having trouble to calculate my inputs even when I edit the default inputs. I want all the inputs to sum up when the user clicks on the selected 'Yes' radio buttons and then clicks on the 'Calculate' button in order to get the sum of inputted values. Need help on the code:
<script type="text/javascript">
function findTotal()
{
var arr = document.getElementsByName('qty');
var tot=0;
var stdHour=0;
for(var i = 0; i < arr.length; i++) //i=1/i=0
{
var radios = document.getElementsByName('group'+i);
for(var j = 0; j < radios.length; j++)
{
var radio = radios[j];
if(radio.value == "Yes" && radio.checked)
{
if(parseInt(arr[i].value))
{
tot += parseInt(arr[i].value);
}
}
}
}
document.getElementById('total').value = tot;
document.getElementById('stdHour').value = 3600/tot;
}
</script>
<!DOCTYPE html>
<html>
<head>
<style>
<!--Table designing-->
table
{
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%%;
align: center;
}
td, th
{
border: 1px solid #dddddd;
text-align: center;
padding: 6px;
}
tr:nth-child(even)
{
background-color: #dddddd;
}
input
{
text-align:center;
}
</style>
</head>
<!--Start of Table Developing-->
<body>
<br/>
<br/>
<br/>
<form id="radioForm" method="get" >
<table style="width:70%" align="center">
<!--Attributes of table. Colspan used to insert sub-title for the main title.-->
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td>Edit</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<label id="group1"> <!--label is used to control the respective group of radio buttons-->
<td>Initial (On Arrival)</td>
<!--The input box in the 'Edit' column is set as below-->
<td><input onblur="findTotal()" type="text" value="20" align="center" name="qty" id="qty1" maxlength="4" size="4"/></td>
<!--The check boxes of 'Yes' and 'No' is created as below-->
<td><input type="radio" name="group1" value="Yes"></td>
<td><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Drop Test (Portable Only)</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"/></td>
<td><input type="radio" name="group2" value="Yes"></td>
<td><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>Power Up Test (Mobile Only)</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"/></td>
<td><input type="radio" name="group3" value="Yes"></td>
<td><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<label id="group4">
<td>User Interface Room</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td>
<td><input type="radio" name="group4" value="Yes"></td>
<td><input type="radio" name="group4" value="No"></td>
</label>
</tr>
<tr>
<td><B>-30 Degree C (Cold Temp)</B></td>
</tr>
<tr>
<label id="group5">
<td>ATE Labview RF Testing Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty5" maxlength="4" size="4"/></td>
<td><input type="radio" name="group5" value="Yes"></td>
<td><input type="radio" name="group5" value="No"></td>
</label>
</tr>
<tr>
<label id="group6">
<td>User Interface Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty6" maxlength="4" size="4"/></td>
<td><input type="radio" name="group6" value="Yes"></td>
<td><input type="radio" name="group6" value="No"></td>
</label>
</tr>
<tr>
<label id="group7">
<td>Mic Talk Internal Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty7" maxlength="4" size="4"/></td>
<td><input type="radio" name="group7" value="Yes"></td>
<td><input type="radio" name="group7" value="No"></td>
</label>
</tr>
<tr>
<label id="group8">
<td>Mic Talk External Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty8" maxlength="4" size="4"/></td>
<td><input type="radio" name="group8" value="Yes"></td>
<td><input type="radio" name="group8" value="No"></td>
</label>
</tr>
<tr>
<label id="group9">
<td>Desense Test</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty9" maxlength="4" size="4"/></td>
<td><input type="radio" name="group9" value="Yes"></td>
<td><input type="radio" name="group9" value="No"></td>
</label>
</tr>
<tr>
<label id="group10">
<td>Tx Stability</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty10" maxlength="4" size="4"/></td>
<td><input type="radio" name="group10" value="Yes"></td>
<td><input type="radio" name="group10" value="No"></td>
</label>
</tr>
<tr>
<label id="group11">
<td>Microphonic Test</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty11" maxlength="10" size="4"/></td>
<td><input type="radio" name="group11" value="Yes"></td>
<td><input type="radio" name="group11" value="No"></td>
</label>
</tr>
<tr>
<td><B>+60 Degree C (Hot Temp)</B></td>
</tr>
<tr>
<label id="group12">
<td>ATE Labview RF Testing Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty12" maxlength="4" size="4"/></td>
<td><input type="radio" name="group12" value="Yes"></td>
<td><input type="radio" name="group12" value="No"></td>
</label>
</tr>
<tr>
<label id="group13">
<td>User Interface Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty13" maxlength="4" size="4"/></td>
<td><input type="radio" name="group13" value="Yes"></td>
<td><input type="radio" name="group13" value="No"></td>
</label>
</tr>
<tr>
<label id="group14">
<td>Mic Talk Internal Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty14" maxlength="4" size="4"/></td>
<td><input type="radio" name="group14" value="Yes"></td>
<td><input type="radio" name="group14" value="No"></td>
</label>
</tr>
<tr>
<label id="group15">
<td>Mic Talk External Extreme</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty15" maxlength="4" size="4"/></td>
<td><input type="radio" name="group15" value="Yes"></td>
<td><input type="radio" name="group15" value="No"></td>
</label>
</tr>
<tr>
<label id="group16">
<td>Desense Test</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty16" maxlength="4" size="4"/></td>
<td><input type="radio" name="group16" value="Yes"></td>
<td><input type="radio" name="group16" value="No"></td>
</label>
</tr>
<tr>
<label id="group17">
<td>Tx Stability</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty17" maxlength="4" size="4"/></td>
<td><input type="radio" name="group17" value="Yes"></td>
<td><input type="radio" name="group17" value="No"></td>
</label>
</tr>
<tr>
<label id="group18">
<td>Microphonic Test</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty18" maxlength="4" size="4"/></td>
<td><input type="radio" name="group18" value="Yes"></td>
<td><input type="radio" name="group18" value="No"></td>
</label>
</tr>
<tr>
<td><B>Final (Ambient Room Temp)</B></td>
</tr>
<tr>
<label id="group19">
<td>Drop Test (Portable Only)</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty19" maxlength="4" size="4"/></td>
<td><input type="radio" name="group19" value="Yes"></td>
<td><input type="radio" name="group19" value="No"></td>
</label>
</tr>
<tr>
<label id="group20">
<td>ATE Labview RF Testing Room</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty20" maxlength="4" size="4"/></td>
<td><input type="radio" name="group20" value="Yes"></td>
<td><input type="radio" name="group20" value="No"></td>
</label>
</tr>
<tr>
<label id="group21">
<td>Mic Talk Internal Room</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty21" maxlength="4" size="4"/></td>
<td><input type="radio" name="group21" value="Yes"></td>
<td><input type="radio" name="group21" value="No"></td>
</label>
</tr>
<tr>
<label id="group22">
<td>Mic Talk External Room</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty22" maxlength="4" size="4"/></td>
<td><input type="radio" name="group22" value="Yes"></td>
<td><input type="radio" name="group22" value="No"></td>
</label>
</tr>
<tr>
<label id="group23">
<td>Final Mechanical Inspection</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty23" maxlength="4" size="4"/></td>
<td><input type="radio" name="group23" value="Yes"></td>
<td><input type="radio" name="group23" value="No"></td>
</label>
</tr>
<tr>
<label id="group24">
<td>Label Info Verification</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty24" maxlength="4" size="4"/></td>
<td><input type="radio" name="group24" value="Yes"></td>
<td><input type="radio" name="group24" value="No"></td>
</label>
</tr>
<tr>
<label id="group25">
<td>Gauge Checking</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty25" maxlength="4" size="4"/></td>
<td><input type="radio" name="group25" value="Yes"></td>
<td><input type="radio" name="group25" value="No"></td>
</label>
</tr>
<tr>
<label id="group26">
<td>Charging</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty26" maxlength="4" size="4"/></td>
<td><input type="radio" name="group26" value="Yes"></td>
<td><input type="radio" name="group26" value="No"></td>
</label>
</tr>
<tr>
<label id="group27">
<td>Packaging Buy Off</td>
<td><input onblur="findTotal()" type="text" value="60" align="center" name="qty" id="qty27" maxlength="4" size="4"/></td>
<td><input type="radio" name="group27" value="Yes"></td>
<td><input type="radio" name="group27" value="No"></td>
</label>
</tr>
<tr>
<td>Total (seconds)</td>
<td><input type="text" name="total" id="total"/></td>
</tr>
<tr>
<td>Standard Hour</td>
<td><input type="text" name="stdHour" id="stdHour"/></td>
</tr>
<tr>
<td>VCT Capacity</td>
<td><input type="text" name="capacity" id="capacity"/></td>
</tr>
<tr>
<td>Head Count</td>
<td><input type="text" name="hc" id="hc"/></td>
</tr>
<tr>
<td>Number of Days</td>
<td><input type="text" name="days" id="days"/></td>
</tr>
</table>
<button type="button" align="center" onClick="findTotal()">Calculate</button>
</form> <!--End of Form-->
Your quantity count does not match as you have group names starting from 1 (e.g group1). Just modify this line, and it should work.
var radios = document.getElementsByName("group" + (i+1));
I have removed quite a bit of HTML but it works: the code is below. You can just add the other sections in it will work.
I have started the count at 0: so the first section has group0 and qt0, it helps a lot when going through the arrays in the JS code. Also, I have removed all the .onblur calls, only the button click will run findTotal().
function findTotal() {
let arr = document.getElementsByName('qty');
let tot = 0;
let stdHour = 0;
for (let i = 0; i < arr.length; i++) {
let radios = document.getElementsByName('group' + i);
for (let j = 0; j < radios.length; j++) {
let radio = radios[j];
if (radio.value == "Yes" && radio.checked) {
tot += parseInt(arr[i].value);
}
}
}
document.getElementById('total').value = tot;
document.getElementById('stdHour').value = 3600 / tot;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%%;
text-align: center;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 6px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
input {
text-align: center;
}
#button {
width: 200px margin: auto;
text-align: center;
margin: 10px;
}
<form id="radioForm" method="get">
<table style="width:70%" align="center">
<tr>
<th>Test Points</th>
<th colspan="4">Cycle-Time</th>
</tr>
<tr>
<td></td>
<td>Edit</td>
<td>Yes</td>
<td>No</td>
</tr>
<tr>
<label id="group0">
<td>Initial (On Arrival)</td>
<td><input type="text" value="20" align="center" name="qty" id="qty0" maxlength="4" size="4"></td>
<td><input type="radio" name="group0" value="Yes"></td>
<td><input type="radio" name="group0" value="No"></td>
</label>
</tr>
<tr>
<label id="group1">
<td>Drop Test (Portable Only)</td>
<td><input type="text" value="60" align="center" name="qty" id="qty1" maxlength="4" size="4"></td>
<td><input type="radio" name="group1" value="Yes"></td>
<td><input type="radio" name="group1" value="No"></td>
</label>
</tr>
<tr>
<label id="group2">
<td>Power Up Test (Mobile Only)</td>
<td><input type="text" value="60" align="center" name="qty" id="qty2" maxlength="4" size="4"></td>
<td><input type="radio" name="group2" value="Yes"></td>
<td><input type="radio" name="group2" value="No"></td>
</label>
</tr>
<tr>
<label id="group3">
<td>User Interface Room</td>
<td><input type="text" value="60" align="center" name="qty" id="qty3" maxlength="4" size="4"></td>
<td><input type="radio" name="group3" value="Yes"></td>
<td><input type="radio" name="group3" value="No"></td>
</label>
</tr>
<tr>
<td>Total (seconds)</td>
<td><input type="text" name="total" id="total" /></td>
</tr>
<tr>
<td>Standard Hour</td>
<td><input type="text" name="stdHour" id="stdHour" /></td>
</tr>
</table>
</form>
<div id="button"><button type="button" align="center" onClick="findTotal()">Calculate</button></div>