计算器功能不工作 - 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

回答

相关问题