HTML - Multiple Calculations in a Function

Question

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>

What is the problem that you are having? Your existing function demonstrates how to get/set input element values and how to do calculations with *, /, etc. Aren't the three formulae you asked about just more of the same? — nnnnnn
– nnnnnn, Commented Aug 30, 2017 at 2:58
@nnnnnn I need help in adding those calculations in the function Calc(). I did them but it didn't work. — cerberus99
– cerberus99, Commented Aug 30, 2017 at 3:25
@JaromandaX Yes, I was afraid that the question asked previously weren't direct. Any idea on how can i solve this? — cerberus99
– cerberus99, Commented Aug 30, 2017 at 3:26
@JaromandaX I do understand the calculating total part and all. I just wanna add another three variables which needs the value of the 'total' and 'stdHour'. Are my codes wrong? — cerberus99
– cerberus99, Commented Aug 30, 2017 at 3:57
@JaromandaX I didn't get any output for what i asked for, I just need help on building the codes for those three formulas — cerberus99
– cerberus99, Commented Aug 30, 2017 at 6:25

GarethAS · Accepted Answer · 2017-08-30 09:22:02Z

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>

Collectives™ on Stack Overflow

HTML - Multiple Calculations in a Function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related