Javascript工資計算器

Question

我正在嘗試使用Javascript製作年薪計算器。以下是我迄今爲止：

<div id="fulldiv"> 
 
\t \t <p> Enter the following information to calculate your annual salary.</p> 
 
\t \t \t \t \t 
 
\t \t <p>Hourly Wage: 
 
\t \t <input type="text" name="wage" id="txt_wage" value ="0.00"/></p> 
 
\t \t \t \t \t 
 
\t \t <p>Hours Per Week: 
 
\t \t <input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/> 
 
\t \t 
 
\t \t <button value="calculate" onclick="calcSalary()">Calculate</button></p> 
 
\t \t 
 
\t \t <p id="results"></p> 
 
\t \t \t \t \t 
 
\t \t <script type="text/javascript"> 
 
\t \t 
 
\t \t function calcSalary() { 
 
\t \t var wage_element = document.getElementById('txt_wage'); 
 
\t \t var wage = parseInt(wage_element.value); 
 
\t \t var hours_element = document.getElementById('txt_hours'); 
 
\t \t var hours = parseInt(hours_element.value); 
 
\t \t var calculate = wage_element * hours_element * 52; 
 
\t \t document.getElementByID('results').innerHTML = calculate; 
 
\t \t } 
 
\t \t </script> 
 
\t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t 
 

 
</div>

當我按一下按鈕，沒有任何反應。有什麼想法嗎？

Answer 1

在有一些拼寫錯誤。我稍微重寫並簡化了代碼，以確保a）您的計算基於輸入的值，b）您使用標籤來提供相對於輸入的文本 - 而不是p。

function calcSalary() { 
 
var wage = parseFloat(document.getElementById('txt_wage').value); 
 
var hours = parseFloat(document.getElementById('txt_hours').value); 
 
var calculate = wage * hours * 52; 
 
    
 
document.getElementById('results').innerHTML = calculate; 
 
}

<div id="fulldiv"> 
 
<p> Enter the following information to calculate your annual salary.</p> 
 
<label for="txt_wage">Hourly Wage:</label> 
 
<input type="text" name="wage" id="txt_wage" value ="0.00"/> 
 
\t \t \t \t \t 
 
<label for="txt_hours">Hours Per Week:</label> 
 
<input type="text" name="hours" id="txt_hours" value= "0.0"/> 
 
    <br/><br/> 
 
<button value="calculate" onclick="calcSalary()">Calculate</button> 
 
<p id="results"></p> 
 
</div>

Answer 2

你的代碼需要調整

var calculate = wage_element * hours_element * 52; 

應改爲

var calculate = wage * hours * 52; 

Answer 3

的問題是，你計算的元素，而不是值。

@Gerard打我給它一分鐘，但這裏的工作代碼。

<div id="fulldiv"> 
 
\t \t <p> Enter the following information to calculate your annual salary.</p> 
 
\t \t \t \t \t 
 
\t \t <p>Hourly Wage: 
 
\t \t <input type="text" name="wage" id="txt_wage" value ="0.00"/></p> 
 
\t \t \t \t \t 
 
\t \t <p>Hours Per Week: 
 
\t \t <input type="text" name="hours" id="txt_hours" value= "0.0"/> <br/><br/> 
 
\t \t 
 
\t \t <button value="calculate" onclick="calcSalary()">Calculate</button></p> 
 
\t \t 
 
\t \t <p id="results"></p> 
 
\t \t \t \t \t 
 
\t \t <script type="text/javascript"> 
 
\t \t 
 
\t \t function calcSalary() { 
 
     var wage_element = document.getElementById('txt_wage'); 
 
     var wage = parseInt(wage_element.value); 
 
     var hours_element = document.getElementById('txt_hours'); 
 
     var hours = parseInt(hours_element.value); 
 
     
 
     var calculate = wage * hours * 52; 
 
     document.getElementById('results').innerHTML = calculate; 
 
\t \t } 
 
\t \t </script> 
 
\t \t \t \t 
 
\t \t \t \t \t 
 
\t \t \t \t 
 

 
</div>