使用Object在Javascript中创建一个简单的计算器
[英]Making a simple calculator in Javascript using an Object
问题描述
我一直坚持这个，并不知道如何自己修复它。 我已经尝试过使用firebug并将其中的一部分用于工作，但这对于这么小的脚本来说却是如此令人沮丧和耗时。 也许我正在使用switch语句错误...
基本上我是第一次使用Object制作一个非常简单的计算器...任何一点点都会有所帮助 - 任何推动正确的方向:)
非常感谢您的阅读！
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>
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)
除了混淆赋值运算符（=）和相等比较运算符（==）运算符的错误之外，这太复杂了。
如果不是obj.num1Value不是一个数字是真的而不是obj.num2alue不是一个数字是真的吗？
- 说什么？
考虑这个公式：
if ( isNaN(obj.num1Value) || isNaN(obj.num2Value) )
啊，如果obj.num1Value或obj.num2Value不是数字呢......
您也可以在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;
// ..
此外，如果在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;
}
你不是没有覆盖你没有答案的场景：
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
我无法让jsFiddle工作，但你的两个问题是你的比较。
isNaN(obj.num1Value) = true
不是法律声明。 您需要将其修改为：
isNaN(obj.num1Value) == true
这将进行比较。 因此，更改的行看起来像：
if (!isNaN(obj.num1Value) == true || !isNaN(obj.num2Value) == true){
.....
和：
case obj.div.checked && num2Value == 0 : alert("cannot divide by zero"); break;
这两种情况的唯一变化是从=更改为==
解决方案4
0 2012-03-23 21:38:23
你混淆了赋值运算符（ = ）和相等比较运算符（ == ）。
=运算符用于为变量赋值。
如果要将值与true进行比较，则可以使用：
isNaN(obj.num1Value) == true
注意删除了! 因为isNaN对于无效数字返回true 。
其次，你有var num1Value但你正在访问它，好像该对象具有一个名为（ obj.num1Value ）的属性。 你必须使用其中之一，但不能同时使用两者（你将它存放在与你从中取出它的地方不同的地方）。
使用 JavaScript 的简单计算器
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.