尝试为项目创建一个javascript计算器。我不是很好用javascript请帮忙。我没有错误,也没有显示任何内容。也许与事件监听器的东西..?这是我的剧本:
$(function () {
"use strict";
var num1, num2, answer, operation = 0;
var add = function (num1, num2) {
var sum = num1 + num2;
return sum;
};
var subtract = function (num1, num2) {
var diff = num1 - num2;
return diff;
};
var multiply = function (num1, num2) {
var product = num1 * num2;
return product;
};
var divide = function (num1, num2) {
var quotient = num1 / num2;
return quotient.toFixed(4);
};
$(".button").click(function () {
var value = document.getElementById(this);
switch (value) {
case "zero":
if (typeof(operation) == "string") {
num2 = 0;
} else {
num1 = 0;
}
$("#display").append("0");
break;
case "one":
if (typeof(operation) == "string") {
num2 = 1;
} else {
num1 = 1;
}
$("#display").append("1");
break;
case "two":
if (typeof(operation) == "string") {
num2 = 2;
} else {
num1 = 2;
}
$("#display").append(2);
break;
case "three":
if (typeof(operation) == "string") {
num2 = 3;
} else {
num1 = 3;
}
$("#display").append(3);
break;
case "four":
if (typeof(operation) == "string") {
num2 = 4;
} else {
num1 = 4;
}
$("#display").append(4);
break;
case "five":
if (typeof(operation) == "string") {
num2 = 5;
} else {
num1 = 5;
}
$("#display").append(5);
break;
case "six":
if (typeof(operation) == "string") {
num2 = 6;
} else {
num1 = 6;
}
$("#display").append(6);
break;
case "seven":
if (typeof(operation) == "string") {
num2 = 7;
} else {
num1 = 7;
}
$("#display").append(7);
break;
case "eight":
if (typeof(operation) == "string") {
num2 = 8;
} else {
num1 = 8;
}
$("#display").append(8);
break;
case "nine":
if (typeof(operation) == "string") {
num2 = 9;
} else {
num1 = 9;
}
$("#display").append(9);
break;
case "add":
operation = "+";
break;
case "subtract":
operation = "-";
break;
case "multiply":
operation = "*";
break;
case "divide":
operation = "/";
break;
case "equals":
if (operation == "+") {
answer = add(num1, num2);
$("#display").html(answer);
} else if (operation == "-") {
answer = subtract(num1, num2);
$("#display").html(answer);
} else if (operation == "*") {
answer = multiply(num1, num2);
$("#display").html(answer);
} else if (operation == "/") {
answer = divide(num1, num2);
$("#display").html(answer);
}
else {
return;
}
break;
case "clear":
num1 = "";
num2 = "";
operation = 0;
answer = "";
$("#display").html(0);
break;
}
});
});
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div class="main">
<div id="display"></div>
<div class ="button" id="add">+</div>
<div class ="button" id="subtract">-</div>
<div class ="button" id="multiply">x</div>
<div class ="button" id="divide">/</div>
<div class ="button" id="zero">0</div>
<div class ="button" id="one">1</div>
<div class ="button" id="two">2</div>
<div class ="button" id="three">3</div>
<div class ="button" id="four">4</div>
<div class ="button" id="five">5</div>
<div class ="button" id="six">6</div>
<div class ="button" id="seven">7</div>
<div class ="button" id="eight">8</div>
<div class ="button" id="nine">9</div>
<div class ="button" id="equals">=</div>
<div class ="button" id="clear">C</div>
</div>
</body>
</html>
答案 0 :(得分:2)
要获取点击按钮的ID,您可以使用document.getElementbyId()
,它在jQuery术语中类似于$('#')
选择器,并且正在获取DOM元素,而不是ID按钮。为此,请使用$(this).attr('id');
。
var value = $(this).attr('id');
switch (value) {...}
没有错误的原因是它只是轻松超过switch
语句,因为它基本上写了很多if
语句。他们都评估为假,代码继续。
一个额外的建议,因为你是编程的新手。作为一般规则,在default
的末尾添加switch
案例是件好事。如果所有其他值都为false,则此代码将运行。
代码末尾的类似内容将有助于调试,以后可能会有用。
case "clear":
num1 = "";
num2 = "";
operation = 0;
answer = "";
$("#display").html(0);
break;
default:
console.log("ID not recognized!");
break;
}