2012-03-23 42 views
0

我一直堅持這一點,並不真正知道如何去解決它自己。我已經嘗試過使用螢火蟲並將其部分工作,但對於這麼小的腳本來說,這太令人沮喪和耗時了。也許我使用的開關語句錯誤...在JavaScript中使用一個對象製作一個簡單的計算器

本質上,我正在製作一個非常簡單的計算器,第一次使用對象... 任何一點都會有所幫助 - 任何推動正確的方向: )

非常感謝您的閱讀!

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

} 
+0

如果您將代碼放在jsFiddle上或將我們指向工作鏈接,這將會很有幫助。 – 2012-03-23 21:29:36

+0

託管:http://jsfiddle.net/FyRrc/ – mellamokb 2012-03-23 21:30:05

+0

由於HTML頁面的標題是「作業8」,這是一個作業問題嗎?如果是這樣,請將其標記爲。 – mellamokb 2012-03-23 21:30:44

回答

2
if (!isNaN(obj.num1Value) = true || !isNaN(obj.num2Value) = true) 

除了誤差由於混淆賦值運算符(=)和相等比較運算符(==)運算符這 是過於複雜的。

如果不是obj.num1Value不是一個數是真的而不是obj.num2alue不是一個數是真的嗎?

  • 說什麼?

考慮這一提法:

if (isNaN(obj.num1Value) || isNaN(obj.num2Value)) 

啊,如果任一obj.num1Value或obj.num2Value不是數千萬......

你也可能要申報ans和「

resultArea : function(){ 
    var ans; 
    var p; 

    // ... 

    switch(true){ 
     // Note that we removed var keyword! 
     case obj.add.checked : ans = (num1Value + num2Value); break; 
      // .. 

此外,如果你在交換機統計使用換行符每種情況:在resultArea函數的頂部對'變一次EMENT它變得更容易跟蹤 控制流:

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

編輯:錯過var錯誤提到@ pimvdb – max 2012-03-23 22:33:33

+0

謝謝! 幾個星期前我真是太糟糕了...... 想知道10年後我會怎麼想這個第一個問題哈哈! – AlecPerkey 2012-04-20 02:39:29

0

我不能得到的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; 

在這兩種情況下,唯一的變化是從=改爲==

0

你混淆分配運算符(=)和相等比較運算符(==)。

運算符=用於爲變量賦值。

如果你想比較true一個值,你可以使用:

isNaN(obj.num1Value) == true 

注意去除!以及因爲isNaN回報true爲無效號碼。

其次,你有var num1Value,但你正在訪問它,就好像對象有一個叫做這樣的屬性(obj.num1Value)一樣。你必須使用但不是兩者(你將它存儲在一個不同的地方,而不是你從中獲取它的地方)。

+0

非常感謝您的幫助。這一切都現在完美...奇怪的是谷歌瀏覽器似乎並不在乎,如果我使用引用對象屬性作爲變量。這一直扔我=/ – AlecPerkey 2012-03-23 22:16:57

0

function c(val) 
 
{ 
 
\t document.getElementById("d").value=val; 
 
} 
 
function v(val) 
 
{ 
 
\t document.getElementById("d").value+=val; 
 
} 
 
function e() 
 
{ 
 
\t try 
 
\t { 
 
\t c(eval(document.getElementById("d").value)) 
 
\t } 
 
\t catch(e) 
 
\t { 
 
\t c('Error') 
 
\t } 
 
}
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"> 
 
\t <div class="display"><input type="text" readonly size="18" id="d"></div> 
 
\t <div class="keys"> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t \t <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> 
 
\t </div> 
 
</div> 
 

 
</body>

+1

你應該解釋你的代碼以及它爲什麼有幫助。 – Reeno 2015-10-09 07:48:54

相關問題