計算器功能不工作 - Javascript

-1

我正在構建一個計算器，它的JavaScript功能不能正常工作。我檢查了我的代碼，我確信我有正確的語法和一切。計算器功能不工作 - Javascript

繼承人的鏈接到我的codepen http://codepen.io/theMugician/pen/ojEEGr

下面是HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="calculator" class="container"> 
 
    <div id="screen" class="text-right"> 
 
    0 
 
    </div> 
 
    <div id="controls"> 
 
    <div id="circle"> 
 
     <div class="button equals"> 
 
     = 
 
     </div> 
 
    </div> 
 
    <div style="margin-top: ;" class="buttonRow text-center"> 
 
     <div class="button"> 
 
     AC 
 
     </div> 
 
     <div class="button"> 
 
     CE 
 
     </div> 
 
     <div class="button"> 
 
     % 
 
     </div> 
 
     <div class="button"> 
 
     /
 
     </div> 
 
    </div> 
 
    <div class="buttonRow text-center"> 
 
     <div class="button"> 
 
     7 
 
     </div> 
 
     <div class="button"> 
 
     8 
 
     </div> 
 
     <div class="button"> 
 
     9 
 
     </div> 
 
     <div class="button"> 
 
     * 
 
     </div> 
 
    </div> 
 
    <div class="buttonRow text-center"> 
 
     <div class="button"> 
 
     4 
 
     </div> 
 
     <div class="button"> 
 
     5 
 
     </div> 
 
     <div class="button"> 
 
     6 
 
     </div> 
 
     <div class="button"> 
 
     + 
 
     </div> 
 
    </div> 
 
    <div class="buttonRow text-center"> 
 
     <div class="button"> 
 
     1 
 
     </div> 
 
     <div class="button"> 
 
     2 
 
     </div> 
 
     <div class="button"> 
 
     3 
 
     </div> 
 
     <div class="button"> 
 
     - 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

這裏是Java腳本

var entries = []; 
 
var total = 0; 
 
var temp = ''; 
 

 
$(".button").on("click", function() { 
 
    \t var val = $(this).text(); 
 

 
    // Got a number, add to temp 
 
    if (!isNaN(val) || val === '.') { 
 
    temp += val; 
 
    $("#screen").val(temp.substring(0,10)); 
 
    
 
    // Got some symbol other than equals, add temp to our entries 
 
    // then add our current symbol and clear temp 
 
    } else if (val === 'AC') { 
 
    entries = []; 
 
    temp = ''; 
 
    total = 0; 
 
    $("#screen").val('') 
 

 
    // Clear last entry 
 
    } else if (val === 'CE') { 
 
    temp = ''; 
 
    $("#screen").val('') 
 
    
 
    // Got the equals sign, perform calculation 
 
    } else if (val === '=') { 
 
    \t entries.push(temp); 
 
    // Definitely not the most elegant 
 
    var newTotal = eval(entries.join('').substring(0, 10)) 
 
    $("#screen").val(newTotal); 
 
\t \t entries = []; 
 
    temp = ''; 
 
    
 
    // Push operators 
 
    } else { 
 
    entries.push(temp); 
 
    entries.push(val); 
 
    temp = ''; 
 
    } 
 
});

來源

2015-10-23 Grzes Slania

它如何工作不正確...給測試用例和預期結果。 – Hogan

你可以更具體地瞭解什麼是不工作？ – PhilVarg

'＃screen'是一個DIV，但是你正在做'$（「＃screen」）.val（）'，但是DIV沒有值。改用'$（「＃screen」）。text（）'。 – adeneo

兩個主要錯誤：

您必須.trim()你的按鈕的文本值。因爲通常，他們的文字就像 AC 。所以代碼修復：
```
var val = $(this).text().trim(); 
```
你想盡力.val改變#screen文字，這是只爲<input>元素。相反，請使用$("#screen").text()。

固定碼與一些有用的調試消息：http://jsfiddle.net/Darker/hrfeabjy/

來源

2015-10-23 20:46:55

有一些問題，但adeneo prettey多釘主之一。我編輯了你的codepen，看看下面的鏈接。包含是通過數據屬性確定按鈕值的更好方法（請參閱Juhana的評論）。

<div class="button" data-val="%">

然後訪問它在JS是這樣的：

var val = $(this).data("val");

我也改變了Z-索引的「=」按鈕，圓形等全按鈕爲可點擊的，不只是上半部分。

http://codepen.io/anon/pen/Yyegzq

來源

2015-10-23 21:15:57

計算器功能不工作 - Javascript

回答

相關問題