2017-08-30 59 views
0

我想在幾個公式中添加一個名爲Calc()的函數。我設法完成了總時間和標準時間的計算。按照以下公式,我需要幫助來添加計算。HTML - 函數中的多次計算

  1. 贏取小時= stdHour *表數
  2. 人們=(賺小時/ 6.6)*天數
  3. 賺取天= /(計數頭數/ stdHour)表數

注意:表格的數量,天數和人數是用戶輸入。

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> 
 
\t <!--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> 
 
\t <!--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> 
 
\t <td><input type="text" value="60" align="center" name="qty" id="qty4" maxlength="4" size="4"/></td> 
 
\t <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>

+0

什麼是你所遇到的問題?您現有的函數演示瞭如何獲取/設置輸入元素值以及如何使用'*','/'等進行計算。您提到的三種公式是不是相同? – nnnnnn

+0

@nnnnnn我需要幫助在Calc()函數中添加這些計算。我做了他們,但沒有奏效。 – cerberus99

+0

@JaromandaX是的,我擔心以前提出的問題不是直接的。任何想法如何解決這個問題? – cerberus99

回答

1

我相信這是你正在尋找的答案。

您已經很近了,只需使用.value JavaScript屬性即可獲取用戶輸入的值。

我也將輸入從type="text"改爲type="number",因爲這樣可以解決一些可能的錯誤。

儘管可以對以下JavaScript進行改進,但我希望這對您是可以理解的。

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>

+0

感謝一羣人! – cerberus99