计算器功能不起作用-Javascript

Question

我正在构建一个计算器，由于某些原因其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() { 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 === '=') { entries.push(temp); // Definitely not the most elegant var newTotal = eval(entries.join('').substring(0, 10)) $("#screen").val(newTotal); entries = []; temp = ''; // Push operators } else { entries.push(temp); entries.push(val); temp = ''; } }); 

Answer 1

两个主要错误：

1. 您必须.trim()按钮的文本值。 因为通常来说，他们的文字就像AC 。 所以代码修复：

    var val = $(this).text().trim(); 

2. 您正在尝试通过.val更改#screen文本，该文本仅适用于<input>元素。 而是使用$("#screen").text() 。

带有一些有用调试信息的固定代码： http : //jsfiddle.net/Darker/hrfeabjy/

Answer 2

有几个问题，但主要的问题是adeneo的tte琐。 我已编辑您的Codepen，请查看下面的链接。 其中包括一种通过数据属性确定按钮值的更好方法（请参见Juhana的评论）。

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

然后像这样在js中访问它：

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

我还更改了“ =”按钮圆圈上的zindex，因此整个按钮都是可单击的，而不仅仅是上半部分。

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