我的HTML/Javascript计算器将无法正常工作
My HTML/ Javascript calculator will not work
我正在编写一个简单的UI计算器，它一直运行良好，直到我优化了一些功能以使计算器实际计算。我已经查看了我的代码，但找不到JavaScript的问题。片段只包括数字 1,2,3，但实际的东西有 1-9。
var resultline_str = " ";
var multidigit = 0
var space = 0
var operating = [];
function type1(){
resultline_str += " 1";
document.getElementById('result').innerHTML = resultline_str;
if(multidigit === 0){
operating.push(1);
multidigit = 1;
}else{
if(space === 0){
var n = operating[0]
n = operating[0].toString();
n += '1';
n = parseInt(n);
operating[0] = n;
}else{
var n = operating[2]
n = operating[2].toString();
n += '1';
n = parseInt(n);
operating[2] = n;
};
};
};
function type2(){
resultline_str += " 2";
document.getElementById('result').innerHTML = resultline_str;
if(multidigit === 0){
operating.push(2);
multidigit = 1;
}else{
if(space === 0){
var n = operating[0]
n = operating[0].toString();
n += '2';
n = parseInt(n);
operating[0] = n;
}else{
var n = operating[2]
n = operating[2].toString();
n += '2';
n = parseInt(n);
operating[2] = n;
};
};
};
function type3(){
resultline_str += " 3";
document.getElementById('result').innerHTML = resultline_str;
if(multidigit === 0){
operating.push(3);
multidigit = 1;
}else{
if(space === 0){
var n = operating[0]
n = operating[0].toString();
n += '3';
n = parseInt(n);
operating[0] = n;
}else{
var n = operating[2]
n = operating[2].toString();
n += '3';
n = parseInt(n);
operating[2] = n;
};
};
};
function type_plus(){
resultline_str += " +";
document.getElementById('result').innerHTML = resultline_str;
operating.push('+');
multidigit = 0;
place = 2;
};
function type_minus(){
resultline_str += " -";
document.getElementById('result').innerHTML = resultline_str;
operating.push('-');
multidigit = 0;
place = 2;
};
function equals(){
if(operating.length() != 3){
document.getElementById('result').innerHTML = 'Error';
multidigit = 0;
place = 0
return;
}else{
if(operating[1] === '+'){
resultline_str = resultline_str + <br> + operating[0] + operating[2];
}else if(operating[1] === '-'){
resultline_str = resultline_str + <br> + operating[0] - operating[2];
}else if(operating[1] === '*'){
resultline_str = resultline_str + <br> + operating[0] * operating[2];
}else if(operating[1] === '/'){
resultline_str = resultline_str + <br> + operating[0] / operating[2];
};
};
document.getElementById('result').innerHTML = resultline_str;
operating = [];
multidigit = 0;
place = 0;
};
function clear_line(){
resultline_str = " ";
document.getElementById('result').innerHTML = resultline_str;
operating = [];
multidigit = 0;
place = 0;
};
function times(){
resultline_str += " *";
document.getElementById('result').innerHTML = resultline_str;
operating.push('*');
multidigit = 0;
place = 2;
};
function divide(){
resultline_str += " /";
document.getElementById('result').innerHTML = resultline_str;
operating.push('-');
multidigit = 0;
place = 2;
};#grid{
height:510px;
width:260px;
background-color:blue;
color:white;
border-collapse:collapse;
border:10px solid black;
float:left;
margin-right:10px;
}
#result{
float:right;
height:525px;
width:950px;
background-color:white;
border:2px solid black;
text-align:right;
font-size:45px;
font-family:courier;
font-weight:strong;
}
td{
padding:30px;
font-size:40px;
size:400%;
font-family:courier;
font-weight:bold;
}<!DOCTYPE html>
<head>
</head>
<body>
<div id='grid'>
<table>
<tr>
<td id="1" onclick='type1()'>1</td>
<td id="2" onclick='type2()'>2</td>
<td id="3" onclick='type3()'>3</td>
</tr>
<tr>
<td id="=" onclick='equals()'>=</td>
<td id="+" onclick='type_plus()'>+</td>
<td id="-" onclick='type_minus()'>-</td>
</tr>
<tr>
<td id="times" onclick='times()'>X</td>
<td id="clear" onclick='clear_line()'>C</td>
<td id="divide" onclick='divide()'>%</td>
</tr>
</table>
</div>
<div id="result">
<b></b>
</div>
</body>
</html>你有几个 ; 缺少，你用变量构建了一个字符串，<br>没有被引用为 html。
我修复了您的问题，将其添加到 JS-fiddle 中。现在你只需要解析 Int(( 的值，计算器就可以工作了。
else{
if(operating[1] === '+'){
resultline_str = resultline_str + '<br>' + operating[0] + operating[2];
}else if(operating[1] === '-'){
resultline_str = resultline_str + '<br>' + operating[0] - operating[2];
}else if(operating[1] === '*'){
resultline_str = resultline_str + '<br>' + operating[0] * operating[2];
}else if(operating[1] === '/'){
resultline_str = resultline_str + '<br>' + operating[0] / operating[2];
};
};
使用 chrome/firefox 开发者函数，如 Tendious 所述。
这是我的jsfiddle 我
if(operating[1] === '+'){
resultline_str = resultline_str + '<br>' + (operating[0] + operating[2]);
}else if(operating[1] === '-'){
resultline_str = resultline_str + '<br>' + (operating[0] - operating[2]);
}else if(operating[1] === '*'){
resultline_str = resultline_str + '<br>' + (operating[0] * operating[2]);
}else if(operating[1] === '/'){
resultline_str = resultline_str + '<br>' + (operating[0] / operating[2]);
如果你夹紧(操作[0]+操作[2](等等，则不需要parseInt((。
然后它不再字符串连接。相反，它是一个数学运算(因为两个变量都是数字类型(。与 ">
" 的串联是在数学之后完成的。
我确实在代码中发现了一些问题......我将用线条将它们分开。
if(operating.length() != 3){
当您在 equals 函数的第一行调用 operating 的length时，您放置了一个()，而它应该这样调用......
if(operating.length != 3){
在 equals 函数中 if 语句的else块中，您像这样将几个字符串添加在一起......
resultline_str = resultline_str + <br> + operating[0] + operating[2];
当您在字符串中添加<br>时，您忘记在它周围加上引号。这在这个街区发生了几次。它应该看起来像这样：
resultline_str = resultline_str + "<br>" + operating[0] + operating[2];
我还注意到在运行修改后的代码时1 + 2 = 12.
问题是，在上面提到的同一个块中，您将数字添加到一个字符串中，而不是计算，只是将数字放在一起。
resultline_str = resultline_str + "<br>" + operating[0] + operating[2];
应该改为
resultline_str = resultline_str + "<br>" + (operating[0] + operating[2]);
我在添加的数字周围加上括号，以便它们在附加到字符串之前进行计算。
我重新编码了你的计算器。 如果用 json 定义计算器，则可以更改其工作方式和布局方式：
var calculator = {
buttons: [
[
{ value: '1', type: 'num' },
{ value: '2', type: 'num' },
{ value: '3', type: 'num' }
],
...
你可以像这样保持HTML简单：
<div class="calculator"></div>
然后，通过单步执行 json 来生成 html，如下所示：
var buildCalculator = function( target, buttons){
$(target)
.append(
$('<div />')
.addClass( 'result' )
)
.append(
$('<div />')
.addClass( 'equation' )
);
_.each(buttons, function (row, r) {
$(target)
.append(
addRow(row, r)
)
});
},
addRow = function(row, r){
var div = $('<div />')
.addClass( 'row row-' + r );
_.each(row, function (col, c) {
div.append(
addCol(col,c)
)
});
return div;
},
addCol = function addCols(col,c){
return $('<button />')
.addClass( 'col col-' + c + ' js-' + col.type + ' ' + col.class )
.attr( 'data-action', col.action )
.html( col.value );
};
buildCalculator('.calculator', calculator.buttons );
使用更简单的核心函数进行计算("cases"变量只是对case/switch进行编码的不同方式(：
calculate = function() {
var p = 0,
result = 0,
op = 'add',
eqAdd = function(i) { result = result + equation[i].value; },
eqSub = function(i) { result = result - equation[i].value; },
eqTimes = function(i) { result = result * equation[i].value; },
eqDiv = function(i) { result = result / equation[i].value; },
cases = {
'add': eqAdd,
'sub': eqSub,
'times': eqTimes,
'div': eqDiv
};
_.each(equation, function (eq, i) {
if(op){
if (cases[op]) cases[op](i);
op = false;
} else {
op = eq.action;
}
});
$('.result')
.html( result );
};
最后，使用 jQuery 处理按钮单击：
$('.js-num').click( function(){
equation[position].value = equation[position].value * 10 + parseInt($(this).text());
$('.equation .pos-' + position).html( equation[position].value );
calculate();
});
$('.js-calc').click( function(){
position++
addPosition( $(this).text() );
equation.push( { type: 'calc', action: $(this).attr('data-action') } );
$('.equation .pos-' + position)
.addClass('calc')
.html( equation[position].value );
position++
addPosition( '0' );
equation.push( { type: 'num', value: 0 } );
calculate();
});
$('.js-clear').click( function(){
clear();
});
这还没有完全烘焙 - 它只是在经过时计算每个项目，这意味着它不会在加法之前计算乘法。 为此，我会在计算方程时对其进行预处理，并将项目嵌套在所有乘法和除法符号之间。 这需要一个递归函数来遍历 json。- 我在小提琴中修复了这个问题。
这是一个jsfiddle：https://jsfiddle.net/mckinleymedia/69487mwx/
您在下面的代码上遇到了一个小的语法错误。注意到">br"标签了吗？它应该是字符串的一部分。
这就是我的调试方式，您将来可能有兴趣解决此问题。如果您使用的是 Chrome 浏览器，请按 ctrl + shift + j 以调出控制台，您应该会看到类似第 165 行语法错误的内容以及类似意外字符"<"等等的东西。这应该给你一个关于出了什么问题的提示。
if(operating[1] === '+'){
resultline_str = resultline_str + <br> + operating[0] + operating[2];
}else if(operating[1] === '-'){
resultline_str = resultline_str + <br> + operating[0] - operating[2];
}else if(operating[1] === '*'){
resultline_str = resultline_str + <br> + operating[0] * operating[2];
}else if(operating[1] === '/'){
resultline_str = resultline_str + <br> + operating[0] / operating[2];
};
相关文章：
- Javascript:selenium Web驱动程序isDisplayed(）不工作
- jQuery UI自动完成突然停止工作
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- JavaScript打印功能使日历停止工作
- Javascript.getHours(）工作不正常
- 为什么这在IE中的工作方式与在Firefox中不同
- 视频HTML没有'无法在Internet Explorer 11上工作
- 扩展移相器按钮类不工作
- Firebase迁移-简单的Firebase.set没有'不再工作了——旧的还是新的
- 谷歌地图不是以HTML显示，而是在JS Fiddle上工作
- 正在尝试使用if和else添加类，但无法正常工作
- Jquery FadeIn FadeOut 只工作一次
- Foreach无法在Typescript中工作
- 另一个ajax调用中的Jquery ajax调用在for循环中没有按预期工作
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery）
- JS可以在Chrome中工作，但不能在Firefox中工作
- ajaxToolkit PopupControlExtender不工作.过时的
- HTML标记在脚本标记中工作
- javascript扫雷器floodfill算法不能正常工作
