2016-04-07 20 views
-3

私は自分の仕事の電卓を作ろうとしています。基本的には、もし彼らが私たちの会社に来たら、誰かの貯蓄を計算すると仮定します。 3つの作業セクションがありますが、別のセクションを追加しようとするとうまくいきません。私は作業部署を掲示し、次に働かない部署を掲示します。JavaScript電卓プログラム

WORKING:

<div id="VISABOX"> 
<h4 id="VISA">Visa</h4> 
<input id="vVol" placeholder="Visa Volume..." type="text"><br> 
<input id="vFees" placeholder="Visa Fees..." type="text"><br> 

<button id="vCalc"> Calculate </button> 
<p id="vEMDR" class="words">EMDR=<span id="vEMDRSPAN"></span></p> 
<p id="vMonthly" class="words">Monthly Savings=<span id="vMonthlySpan"></span></p> 
<p id="vYearly" class="words">Yearly Savings=<span id="vYearlySpan"> </span></p> 
<p id="vFive" class="words">Five Year Savings=<span id="vFiveSpan"> </span></p> 
</div> 

document.getElementById("vCalc").onclick=function(){ 

     var visaVol=document.getElementById("vVol").value; 
     var visaFees=document.getElementById("vFees").value; 
     var visaEMDR; 
     visaEMDR=visaFees/visaVol*100; 

     var visaMonthly=visaFees-(visaVol*.0171); 
     var visaYearly=visaMonthly*12; 
     var visaFive=visaYearly*5; 

     document.getElementById("vMonthlySpan").innerHTML=" "+visaMonthly+"$"; 
     document.getElementById("vYearlySpan").innerHTML=" "+visaYearly+"$"; 
     document.getElementById("vFiveSpan").innerHTML=" "+visaFive+"$"; 
     document.getElementById("vEMDRSPAN").innerHTML=" "+visaEMDR+"%"; 

    } 

が機能していない(あまりにも働いてから他のボタンを停止します):

<div id="OCBOX"> 
<h4 id="OCTitle">Other Charges</h4> 
<input id="otherCharges" placeholder="Total Other Charges..." type="text"><br> 
<input id="ourCharges" placeholder="Our Charges..." type="text"><br> 

<button id="ocCalc"> Calculate </button> 
<p id="ocMonthly" class="words">Monthly Savings=<span id="ocMonthlySpan"></span></p> 
<p id="ocYearly" class="words">Yearly Savings=<span id="ocYearlySpan"></span></p> 
<p id="ocFive" class="words">Five Year Savings=<span id="ovFiveSpan"> </span></p> 
</div> 

document.getElementById("ocCalc").onclick=function(){ 

    var otherFees=document.getElementById("otherCharges").value; 
    var ourFees=document.getElementById("ourCharges").value; 

    var ocMonthlySav=otherFees-ourFees; 
    var ocYearlySav=ocMonthlySav*12; 
    var ocFiveSav=ocYearlySav*5; 

    document.getElementById("ocMonthlySpan").innerHTML=" "+ocMonthlySav+"$"; 
    document.getElementById("ocYearlySpan").innerHTML=" "+ocYearlySav+"$"; 
    document.getElementById("ocFiveSpan").innerHTML=" "+ocFiveSav+"$"; 

} 

私は何が起こっているのか分からない...任意の助けをいただければ幸いです。

編集:JavaScriptは正しい タグにあります。私はちょうどそれらを投稿に入れませんでした。

+4

console' '内の任意のエラー? 'script'タグでそれをラップしましたか? – Rayon

+1

また、 '.value'は常に文字列です。 –

+0

申し訳ありませんが、私はそれを正しいスクリプトタグに入れて編集しました。それは、私が2番目の部分を追加して全体が機能しなくなったときだけです。私は3つの同様のセクションには、入力とボタンがすべて動作する。ちょうどこれがクラッシュするようです。 –

答えて

0

この行にタイプミスがあります:

<p id="ocFive" class="words">Five Year Savings=<span id="ovFiveSpan"> </span></p>         <!-- =====oc not ov======^--> 

FiveSpan C OないV O FiveSpan

また、それは<script>タグであなたJavaScriptをラップすることが重要です。

スニペット

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>WorxNo</title> 
 
</head> 
 

 
<body> 
 
    <div id="OCBOX"> 
 
    <h4 id="OCTitle">Other Charges</h4> 
 
    <input id="otherCharges" placeholder="Total Other Charges..." type="text"> 
 
    <br> 
 
    <input id="ourCharges" placeholder="Our Charges..." type="text"> 
 
    <br> 
 

 
    <button id="ocCalc">Calculate</button> 
 
    <p id="ocMonthly" class="words">Monthly Savings=<span id="ocMonthlySpan"></span> 
 
    </p> 
 
    <p id="ocYearly" class="words">Yearly Savings=<span id="ocYearlySpan"></span> 
 
    </p> 
 
    <p id="ocFive" class="words">Five Year Savings=<span id="ocFiveSpan"> </span> 
 
    </p> 
 
    </div> 
 
    <script> 
 
    document.getElementById("ocCalc").onclick = function() { 
 

 
     var otherFees = document.getElementById("otherCharges").value; 
 
     var ourFees = document.getElementById("ourCharges").value; 
 

 
     var ocMonthlySav = otherFees - ourFees; 
 
     var ocYearlySav = ocMonthlySav * 12; 
 
     var ocFiveSav = ocYearlySav * 5; 
 

 
     document.getElementById("ocMonthlySpan").innerHTML = " " + ocMonthlySav + "$"; 
 
     document.getElementById("ocYearlySpan").innerHTML = " " + ocYearlySav + "$"; 
 
     document.getElementById("ocFiveSpan").innerHTML = " " + ocFiveSav + "$"; 
 

 
    } 
 
    </script> 
 
</body> 
 

 
</html>