Question

我一直坚持这个，并不知道如何自己修复它。我已经尝试过使用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);
    },

}

Answer 1

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"));
 }

Answer 2

我无法让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;

这两种情况的唯一变化是从=更改为==

Answer 3

你混淆了赋值运算符（=）和相等比较运算符（==）。

=运算符用于为变量赋值。

如果您想将值与true进行比较，请使用：

isNaN(obj.num1Value) == true

请注意已删除的!，因为isNaN会为无效的号码返回true。

其次，您有var num1Value，但您正在访问它，就好像该对象具有一个名为（obj.num1Value）的属性。你必须使用其中之一，但不能同时使用两者（你将它存放在与你从中取出它的地方不同的地方）。

Answer 4

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>

使用Object在Javascript中创建一个简单的计算器

4 个答案: