2017-04-06 34 views
-2

私はJavascriptを使用して年間給与計算をしようとしています。ここで私はこれまで持っているものです。Javascript Salary Calculator

<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>

私はボタンをクリックすると、何も起こりません。何かご意見は?

+2

**のJava(JavaScriptやJScriptのと混同しないでください)** – chrylis

答えて

0

そこにいくつかのタイプミス。私はコードを少し書き直し、コードを単純化して、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>

+0

これは恐らく疑問な質問ですが、javascriptコードはdivタグ内に入りますが、正しいですか?私はあなたがそれらを別々に持っているのを見る。外部ファイルを使用している場合にのみこれは役に立ちますか? –

+0

はい - divタグのすべてのjavascriptが必要です。divタグの機能は、ページ内のhtml要素の境界を定義することです。javascriptはelemetnsのfuncitonalityを作成するためのものです。理想的には、htmlのonclickイベントハンドラも削除し、jsにイベントリスナを持たせて、そのクリックをその関数で許可します。インラインスタイルを持たないようにするには、CSSの--bstと同じように、ページの上部(頭の中)または外部のCSSファイル(CSSのセクションにある)をCSSセクションに置いてください。 – gavgrif

0

あなたのコードは、問題があなたの代わりに値の要素を計算しているということです

var calculate = wage * hours * 52; 
0

var calculate = wage_element * hours_element * 52; 

を変更する必要がある調整する必要があります。

@ジェラードは分かりましたが、ここには動作コードがあります。

<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>

+0

君たちは素晴らしいです!どうもありがとうございました! –