使用Object在Javascript中创建一个简单的计算器
[英]Making a simple calculator in Javascript using an Object
问题描述
I have been stuck on this and don't really know how to go about fixing it myself. 
我一直坚持这个，并不知道如何自己修复它。 I've tried using firebug and getting parts of it to work, but it's just so frustrating and time consuming for such a small script. 我已经尝试过使用firebug并将其中的一部分用于工作，但这对于这么小的脚本来说却是如此令人沮丧和耗时。 Perhaps I'm using the switch statement wrong... 也许我正在使用switch语句错误...
Essentially I'm making a very simple calculator using an Object for the first time... Any little bit will help--any push in the right direction :) 基本上我是第一次使用Object制作一个非常简单的计算器...任何一点点都会有所帮助 - 任何推动正确的方向:)
Thanks so much for reading! 非常感谢您的阅读！
The HTML file is this: HTML文件是这样的：
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Homework 8</title>
<link href="css/main.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="calc">
<p><label for="num1">First Number:<input type="text" id="num1" class="txt" /></label></p>
<p><label for="num2">Second Number: <input type="text" id="num2" class="txt"/></label></p>
<p><label for ="add"><input type="radio" name="operation" id="add" value="add"/>Add</label>
<label for ="sub"><input type="radio" name="operation" id="sub" value="sub"/>Subtract</label>
<label for ="mult"><input type="radio" name="operation" id="mult" value="mult"/>Multiply</label>
<label for ="div"><input type="radio" name="operation" id="div" value="div"/>Divide</label></p>
<p><input type="button" id="calculate" value="Do Calculation"/></p>
</div>
<div id="result"></div>
<script type="text/javascript" src="js/hw8.js"></script>
<script type="text/javascript">obj.init();</script>
</body>
</html>
The Javascript file is this short script: Javascript文件是这个简短的脚本：
var obj = {
add : document.getElementById("add"),
sub : document.getElementById("sub"),
mult : document.getElementById("mult"),
div : document.getElementById("div"),
num1 : document.getElementById("num1"),
num2 : document.getElementById("num2"),
result : document.getElementById("result"),
calculate : document.getElementById("calculate"),
init : function(){
obj.calculate.onclick = obj.resultArea;
},
resultArea : function(){
var num1Value = parseFloat(num1.value);
var num2Value = parseFloat(num2.value);
if (!isNaN(obj.num1Value) = true || !isNaN(obj.num2Value) = true){
alert("Please enter only numbers in the First Number and Second Number fields!");
return;
}
switch(true){
case obj.add.checked : var ans = (num1Value + num2Value); break;
case obj.sub.checked : var ans = (num1Value - num2Value); break;
case obj.mult.checked : var ans = (num1Value * num2Value); break;
case obj.div.checked && num2Value != 0 : var ans = (num1Value / num2Value); break;
case obj.div.checked && num2Value = 0 : alert("cannot divide by zero"); break;
}
var p = document.createElement("p");
p.appendChild(document.createTextNode("The answer is" + ans));
obj.result.appendChild(p);
},
}
4 个解决方案
解决方案1
2 已采纳 2012-03-23 22:23:25
if (!isNaN(obj.num1Value) = true || !isNaN(obj.num2Value) = true)
Besides the the error due confusing the assignment operator (=) and the equality comparison operator (==) operator this is overly complex. 除了混淆赋值运算符（=）和相等比较运算符（==）运算符的错误之外，这太复杂了。
If not obj.num1Value is not a number is true and not obj.num2alue is not a number is true do? 如果不是obj.num1Value不是一个数字是真的而不是obj.num2alue不是一个数字是真的吗？
- Say what? 说什么？
Consider this formulation: 考虑这个公式：
if ( isNaN(obj.num1Value) || isNaN(obj.num2Value) )
Ah, if either obj.num1Value or obj.num2Value is not an number do... 啊，如果obj.num1Value或obj.num2Value不是数字呢......
Also you may want to declare the ans and ´p´ variable once at the top of the resultArea function: 您也可以在resultArea函数的顶部声明一次ans和'p'变量：
resultArea : function(){
var ans;
var p;
// ...
switch(true){
// Note that we removed var keyword!
case obj.add.checked : ans = (num1Value + num2Value); break;
// ..
Also if you use a line break for each case in the switch statement it becomes much easier to follow the control flow: 此外，如果在switch语句中对每种情况使用换行符，则遵循控制流程会变得更加容易：
switch(true){
case obj.add.checked :
ans = (num1Value + num2Value);
break;
case obj.sub.checked :
ans = (num1Value - num2Value);
break;
case obj.mult.checked :
ans = (num1Value * num2Value);
break;
case obj.div.checked && num2Value !== 0 :
ans = (num1Value / num2Value);
break;
case obj.div.checked && num2Value == 0 :
alert("cannot divide by zero");
break;
}
You are not you are not covering the scenario where you do not have an answer: 你不是没有覆盖你没有答案的场景：
if ( typeof ans !== 'string') {
p.appendChild(document.createTextNode("The answer is forever blowing in the wind"));
}
解决方案2
0 2015-10-09 07:41:39
function c(val) { document.getElementById("d").value=val; } function v(val) { document.getElementById("d").value+=val; } function e() { try { c(eval(document.getElementById("d").value)) } catch(e) { c('Error') } }
h2 { text-align:center; text-decoration:underline; } .box { background-color:#3d4543; height:300px; width:250px; border-radius:10px; position:relative; top:80px; left:40%; } .display { background-color:#222; width:220px; position:relative; left:15px; top:20px; height:40px; } .display input { position:relative; left:2px; top:2px; height:35px; color:black; background-color:#bccd95; font-size:21px; text-align:right; } .keys { position:relative; top:15px; } .button { width:40px; height:30px; border:none; border-radius:8px; margin-left:17px; cursor:pointer; border-top:2px solid transparent; } .button.gray { color:white; background-color:#6f6f6f; border-bottom:black 2px solid; border-top:2px #6f6f6f solid; } .button.pink { color:black; background-color:#ff4561; border-bottom:black 2px solid; } .button.black { color:white; background-color:303030; border-bottom:black 2px solid; border-top:2px 303030 solid; } .button.orange { color:black; background-color:FF9933; border-bottom:black 2px solid; border-top:2px FF9933 solid; } .gray:active { border-top:black 2px solid; border-bottom:2px #6f6f6f solid; } .pink:active { border-top:black 2px solid; border-bottom:#ff4561 2px solid; } .black:active { border-top:black 2px solid; border-bottom:#303030 2px solid; } .orange:active { border-top:black 2px solid; border-bottom:FF9933 2px solid; } p { line-height:10px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <h2>Calculator Created by Anoop Kumar Sharma</h2> <div class="box"> <div class="display"><input type="text" readonly size="18" id="d"></div> <div class="keys"> <p><input type="button" class="button gray" value="mrc" onclick='c("Created....................")'><input type="button" class="button gray" value="m-" onclick='c("...............by............")'><input type="button" class="button gray" value="m+" onclick='c(".....................Anoop")'><input type="button" class="button pink" value="/" onclick='v("/")'></p> <p><input type="button" class="button black" value="7" onclick='v("7")'><input type="button" class="button black" value="8" onclick='v("8")'><input type="button" class="button black" value="9" onclick='v("9")'><input type="button" class="button pink" value="*" onclick='v("*")'></p> <p><input type="button" class="button black" value="4" onclick='v("4")'><input type="button" class="button black" value="5" onclick='v("5")'><input type="button" class="button black" value="6" onclick='v("6")'><input type="button" class="button pink" value="-" onclick='v("-")'></p> <p><input type="button" class="button black" value="1" onclick='v("1")'><input type="button" class="button black" value="2" onclick='v("2")'><input type="button" class="button black" value="3" onclick='v("3")'><input type="button" class="button pink" value="+" onclick='v("+")'></p> <p><input type="button" class="button black" value="0" onclick='v("0")'><input type="button" class="button black" value="." onclick='v(".")'><input type="button" class="button black" value="C" onclick='c("")'><input type="button" class="button orange" value="=" onclick='e()'></p> </div> </div> </body>
解决方案3
0 2012-03-23 21:37:41
I'm not able to get the jsFiddle to work, but two of your problems are your comparisons. 我无法让jsFiddle工作，但你的两个问题是你的比较。
isNaN(obj.num1Value) = true
is not a legal statement. 不是法律声明。 You need to modify this to: 您需要将其修改为：
isNaN(obj.num1Value) == true
This will do a comparison. 这将进行比较。 So, the changed lines would look like: 因此，更改的行看起来像：
if (!isNaN(obj.num1Value) == true || !isNaN(obj.num2Value) == true){
.....
and: 和：
case obj.div.checked && num2Value == 0 : alert("cannot divide by zero"); break;
The only change in both these cases is to change from = to == 这两种情况的唯一变化是从=更改为==
解决方案4
0 2012-03-23 21:38:23
You're confusing the assignment operator ( = ) and the equality comparison operator ( == ). 你混淆了赋值运算符（ = ）和相等比较运算符（ == ）。
The = operator is used to assign a value to a variable. =运算符用于为变量赋值。
If you want to compare a value with true , you would use: 如果要将值与true进行比较，则可以使用：
isNaN(obj.num1Value) == true
Note the removed ! 注意删除了! as well because isNaN returns true for an invalid number. 因为isNaN对于无效数字返回true 。
Second, you have var num1Value but you're accessing it as if the object has a property called as such ( obj.num1Value ). 其次，你有var num1Value但你正在访问它，好像该对象具有一个名为（ obj.num1Value ）的属性。 You have to use either but not both (you're storing it at a different place than where you're fetching it from). 你必须使用其中之一，但不能同时使用两者（你将它存放在与你从中取出它的地方不同的地方）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.