使用JavaScript計算器來計算Math.power功能

Question

我設計的HTML價值觀我自己的JavaScript計算器，看起來就像這樣：

 <input type="button" class="button gray" 
     value="tan" onclick='tan()'> 

     <input type="button" class="button black" value="3" 
     onclick='v("3")'> 

和JavaScript代碼看起來是這樣的：

function tan() { 
     var getValue = document.getElementById("d").value; 
     document.getElementById("d").value=Math.tan(getValue); 
    } 

    function v(val) { 
     document.getElementById("d").value+=val; 
     } 

其中ID「d」表示輸入來自按下的按鈕的值的屏幕。

我遇到麻煩的是有一個按鈕利用Math.pow（a，b）函數。一旦按下按鈕，用值x ^Ÿ我想採取下列步驟操作：

1. 從元素「d」
2. 取值以從按下一個按鈕的值，輸入作爲第二Math.pow（）函數中的值。

我已經下了第一步，我只是沒有想出第二步。 JavaScript代碼我設想是這樣的：

function power() { 
    var getValue = document.getElementById("d").value; 
     ...... 
     ...... 
     var powerTotal = Math.pow(getValue,nextValue); 
     document.getElementById("d").value = powerTotal; 
     } 

（的getValue是初始值，nextValue是電源按鈕被按下後，按下一個按鈕的值）

感謝您對您的幫助提前！！！

Answer 1

這裏有一個潛在的解決方案：

首先，我不知道你如何組織你的代碼，但我會保留一切在某種命名空間，以防止搞亂了一切。之後，我會有映射到每個操作的方法（在return語句中，這些是可以調用的「public」方法），並將傳遞給計算器的參數存儲在數組中。

var Calculator = (function() { 
    var _args = []; 
    var _operation = ''; 

    return { 
     store: function(val) { 
      _args.push(val); 
     }, 

     setOperation: function(op) { 
      _operation = op; 
     }, 

     operations: { 
      pow: function() { 
       return Math.pow(_args[0], _args[1]); 
      }, 

      equals: function() { 
       return this.operations[_operation].apply(this); 
      } 
     } 
    }; 
}()); 

這裏是魔術發生的地方。在window.onload事件（相當於jQuery的document.ready的vanilla JS）中，獲取輸入元素和按鈕，並將事件綁定到它們以獲取所需的數據。您可以使用onblur來獲取輸入值，因爲當您單擊每個按鈕時會觸發（由於字段失去焦點）。當點擊一個操作按鈕時，存儲將要使用的操作字符串，並且該字符串也映射到您的「公共」方法之一。當等號被點擊時，你可以調用equals方法，它使用Function.prototype.apply()做一些奇特的JS元編程來調用正確的函數。

window.onload = function() { 
    var inputField = document.getElementById('d'); 
    var equalsButton = document.getElementById('equals-btn'); 
    var powButton = document.getElementById('pow-btn'); 

    inputField.onblur = function() { 
     Calculator.store(this.value); 
    }; 

    powButton.onclick = function() { 
     Calculator.setOperation('pow'); 
    }; 

    equalsButton.onclick = function() { 
     // sets the original field to the answer like a real calculator would 
     inputField.text = Calculator.operations.equals(); 
    }; 
}; 

這是所有寫了我的頭所以有一個不錯的機會，我搞砸了某個地方的頂部，所以對待這更像僞比一個具體的解決方案。重要的一點是存儲正在輸入的數據的方法，以及在數據輸入（存儲操作）期間在給定點存儲狀態。

希望這會有所幫助。