2016-04-29 69 views
0

我正在從事一個網頁設計項目,我們必須製作一個「計算器」(除了我的教授實際上需要兩個輸入框,算術運算符的單選按鈕和一個提交按鈕。)更改複選框不影響javascript

我的代碼的工作原理與提交數字和獲得答案一樣,但僅適用於最後一個複選框(在此情況下爲「減去」),並且不管選中哪個單選按鈕,答案都不會更改。

我真的是JavaScript的初學者,所以我覺得真的很明顯,我失蹤了?任何幫助是極大的讚賞。

//arithmetic functions 
 
\t \t var calculate_divide = function() { 
 
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value); 
 
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value); 
 
\t \t 
 
\t \t \t document.getElementById('total').value = (num1/num2).toFixed(2); 
 
\t \t } 
 
\t \t 
 
\t \t var calculate_multiply = function() { 
 
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value); 
 
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value); 
 
\t \t 
 
\t \t \t document.getElementById('total').value = (num1*num2).toFixed(2); 
 
\t \t } 
 
\t \t 
 
\t \t var calculate_add = function() { 
 
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value); 
 
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value); 
 
\t \t 
 
\t \t \t document.getElementById('total').value = (num1 + num2).toFixed(2); 
 
\t \t } 
 
\t \t 
 
\t \t var calculate_subtract = function() { 
 
\t \t \t var num1 = parseFloat(document.getElementById('first_number').value); 
 
\t \t \t var num2 = parseFloat(document.getElementById('second_number').value); 
 
\t \t 
 
\t \t \t document.getElementById('total').value = (num1 - num2).toFixed(2); 
 
\t \t } 
 
     
 
// if-else for checked boxes on submit   
 
\t \t window.onload = function() { 
 
\t \t 
 
\t \t \t if(document.getElementById('divide').checked){ 
 
\t \t \t \t document.getElementById('calculate').onclick = calculate_divide; 
 
\t \t \t } else if(document.getElementById('multiply').checked){ 
 
\t \t \t \t document.getElementById('calculate').onclick = calculate_multiply; 
 
\t \t \t } else if(document.getElementById('add').checked){ 
 
\t \t \t \t document.getElementById('calculate').onclick = calculate_add; 
 
\t \t \t } else if(document.getElementById('subtract').checked){ 
 
\t \t \t \t document.getElementById('calculate').onclick = calculate_subtract; 
 
\t \t \t } 
 
\t \t }
<body> 
 
\t <form name="calc"> 
 
\t <div id="calculator"> 
 
\t \t <div id="dispCont"> 
 
\t \t \t <input type="text" class="display" name="first_number" id="first_number" placeholder="First Number"> 
 
\t \t \t <input type="text" class="display" name="second_number" id="second_number" placeholder="Second Number"> 
 
\t \t </div> 
 
\t \t 
 
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="divide" value="/" checked='checked'>/</div> 
 
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="multiply" value="*" checked='checked'>*</div> 
 
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="add" value="+" checked='checked'>+</div> 
 
\t \t <div class="mathOp"><input type="radio" name="mathOp" id="subtract" value="-" checked='checked'>&ndash;</div> 
 
\t \t 
 
\t \t 
 
\t \t <div class="buttons"> 
 
\t \t \t <input class="calcOpEq" type="button" id="calculate" name="calculate" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"> 
 
\t \t \t <input type="text" class="display" name="total" id="total" placeholder="Total"> 
 
\t \t </div> 
 
\t </div> 
 
\t </form> 
 

 

 
</body>

+0

頁面加載你的'calculate_subtract'功能結合到點擊按鈕的事件。另外,document.calculator.ans.value應該用於什麼? – j08691

+1

您正在測試哪個按鈕僅在頁面加載時被選中。這隻會執行一次,當您更改選擇時不會發生任何事情。按下計算按鈕時測試單選按鈕會更好。 – Shovalt

回答

1

更簡單的方式由("calculate").onclick這樣的應用您arithmetic functions

document.getElementById("calculate").onclick = function() { 
 
    var num1 = parseFloat(document.getElementById('first_number').value); 
 
    var num2 = parseFloat(document.getElementById('second_number').value);   
 
    if(document.getElementById('divide').checked){ 
 
    document.getElementById('total').value = (num1/num2).toFixed(2); 
 
    } else if(document.getElementById('multiply').checked){ 
 
    document.getElementById('total').value = (num1*num2).toFixed(2); 
 
    } else if(document.getElementById('add').checked){ 
 
    document.getElementById('total').value = (num1 + num2).toFixed(2); 
 
    } else if(document.getElementById('subtract').checked){ 
 
    document.getElementById('total').value = (num1 - num2).toFixed(2); 
 
    } 
 
}
<form name="calc"> 
 
    <div id="calculator"> 
 
     <div id="dispCont"> 
 
      <input type="text" class="display" name="first_number" id="first_number" placeholder="First Number"> 
 
      <input type="text" class="display" name="second_number" id="second_number" placeholder="Second Number"> 
 
     </div> 
 
     <div class="mathOp"><input type="radio" name="mathOp" id="divide" value="/" checked='checked'>/</div> 
 
     <div class="mathOp"><input type="radio" name="mathOp" id="multiply" value="*" checked='checked'>*</div> 
 
     <div class="mathOp"><input type="radio" name="mathOp" id="add" value="+" checked='checked'>+</div> 
 
     <div class="mathOp"><input type="radio" name="mathOp" id="subtract" value="-" checked='checked'>&ndash;</div> 
 
     <div class="buttons"> 
 
      <input class="calcOpEq" type="button" id="calculate" name="calculate" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"> 
 
      <input type="text" class="display" name="total" id="total" placeholder="Total"> 
 
     </div> 
 
    </div> 
 
</form>

+1

設置了一個更好的例子,記住複製粘貼的人可能有一天會成爲你的隊友......你希望他們至少複製粘貼代碼儘可能遠離熵。 –

+1

@JarrodRoberson是的你是對的,很好的建議。 –