2016-03-20 11 views
-1

こんにちは、私はjavascriptファイルをhtmlに接続できません。私はすべてをコーディングしようとしましたが、今はHTMLの変更を見ることができません。私はここで、従業員の超過分を税金控除で処理して税率を計算しようとしています。JavaScriptデータをHTMLに埋め込むことができません

ありがとうございます。助けてください。

HTMLのための私のコードは

<!doctype html> 
    <html> 
<head> 
    <script language="JavaScript" src="employees.js"></script> 
    <link rel="stylesheet" type="text/css" href="employees.css" /> 
    <title>Pay Form</title> 
</head> 
<body> 
    <section id="content"> 
     <h1> 
      Employee Payroll Entry Form 
     </h1> 
     <div id="payForm"> 
      <p> 
       <label for="fullName">Full Name:</label><input type="text" autofocus id="fullName" /> 
      </p> 
      <p> 
       <label for="hoursWorked">Hours Worked:</label><input type="text" id="hoursWorked" /> 
      </p> 
      <p> 
       <label for="hourlyRate">Hourly Rate:</label><input type="text" id="hourlyRate" /> 
      </p> 
      <footer> 
       <button id="calculateButton" onclick="calculate()">Calculate</button> 
      </footer> 
     </div> 
     <h1> 
      Employee Payroll Summary Report 
     </h1> 

     <table id = "employees"> 
      <tr> 
       <th>Employee Name</th> 
       <th>Gross Pay</th> 
       <th>Tax</th> 
       <th>Net Pay</th> 
      </tr> 
     </table> 
    </section> 
</body> 

で、私のjavascriptのは、あなたが "時間" ではなく、その値のような要素を取得している

var fname = document.getElementById("fullName"); 
    var hours = document.getElementById("hoursWorked"); 
    var rate = document.getElementById("hourlyRate"); 
    var table = document.getElementById("employees"); 
    var gross; 
    var net; 
    var tax; 
    var overtime; 

    function grosspay() { 
if (hours > 0 && hours < 40) { 
    gross = hours * rate; 
} else if (hours < 40) { 
    overtime = hours - 40; 
    gross = (40 * rate) + (overtime * (rate * 1.5)); 
} 
    } 
    function taxPay() { 
if (gross < 250) { 
    tax = gross * 0.25; 
} else if (gross >= 250 && gross < 500) { 
    tax = gross * 0.30; 
} else if (gross >= 500 && gross < 750) { 
    tax = gross * 0.40; 
} else if (gross > 750) { 
    tax = gross * 0.50; 
} 
    } 
    function netPay() { 
net = gross - tax; 
    } 

    function calculate() { 
if (hours > 0) 
{ 
    var row = table.insertRow(); 
    var fnamecell = row.insertCell(0); 
    var grossPaycell = row.insertCell(1); 
    var taxCell = row.insertCell(2); 
    var netPayCell = row.insertCell(3); 

    grosspay(); 
    taxPay(); 
    netPay(); 


    fnamecell.innerHTML = fname; 
    grossPaycell.innerHTML = grosspay; 
    taxCell.innerHTML = tax; 
    netPayCell.innerHTML = net;  
} 
    } 
    function load() { 
var calculateButton = document.getElementById("calculateButtom"); 
calculateButton.addEventListener("click", calculate); 
    } 
+0

firebugのようなjavascriptデバッガを使用していますか? –

答えて

0

です。

次の計算機能を試してください。まだ問題が残っている場合は、デバッガの出力を投稿して他の人が手助けできるようにしてください。

function calculate() { 
    var hoursValue = hours.value; 
    console.log("Hours are : " + hoursValue); 

    if (hoursValue > 0) 
    { 
     var row = table.insertRow(); 
     var fnamecell = row.insertCell(0); 
     var grossPaycell = row.insertCell(1); 
     var taxCell = row.insertCell(2); 
     var netPayCell = row.insertCell(3); 

     grosspay(); 
     taxPay(); 
     netPay(); 


     fnamecell.innerHTML = fname; 
     grossPaycell.innerHTML = grosspay; 
     taxCell.innerHTML = tax; 
     netPayCell.innerHTML = net;  
    } 
} 
0

あなたは要素を取得しますが、その値は取得しません。

は次のように入力フィールドの値を取得:

var hours = document.getElementById("hoursWorked").value; 
var rate = document.getElementById("hourlyRate").value; 

ともbodyタグ内のページの一番下にスクリプトタグを移動します。

関連する問題