2012-03-23 8 views
0

Ich bin auf diesem festgefahren und weiß nicht wirklich, wie man es selbst beheben kann. Ich habe versucht, Firebug zu benutzen und Teile davon zu benutzen, aber es ist einfach frustrierend und zeitraubend für solch ein kleines Skript. Vielleicht benutze ich die switch-Anweisung falsch ...Erstellen eines einfachen Taschenrechners in Javascript mit einem Objekt

Im Wesentlichen mache ich einen sehr einfachen Rechner mit einem Objekt zum ersten Mal ... Jedes bisschen wird helfen - jeder Schub in die richtige Richtung:)

Vielen Dank für das Lesen!

Die HTML-Datei ist dies:

<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> 

Die Javascript-Datei ist diese kurze Skript:

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

Es wäre hilfreich, wenn Sie Ihren Code auf jsFiddle setzen oder uns auf einen funktionierenden Link verweisen würden. –

+0

Hosted: http://jsfiddle.net/FyRrc/ – mellamokb

+0

Da der Titel der HTML-Seite ist "Hausaufgaben 8", ist dies eine Hausaufgabe? Wenn ja, markieren Sie es als solches. – mellamokb

Antwort

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

Neben der der Fehler aufgrund verwirrend den Zuweisungsoperator (=) und den Gleichheitsvergleichsoperator (==) Bediener diese ist zu komplex.

Wenn nicht obj.num1Value ist nicht eine Zahl ist wahr und nicht obj.num2alue ist keine Zahl ist wahr tun?

  • Sag was?

Betrachten Sie diese Formulierung:

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

Ach, wenn entweder obj.num1Value oder obj.num2Value ist keine Zahl do ...

Auch können Sie die ans und "erklären p'Variable einmal an der Spitze der resultArea Funktion:

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

    // ... 

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

auch wenn Sie einen Zeilenumbruch für jeden Fall in dem Schalter Stat verwenden ement es viel einfacher wird den Kontrollfluss zu folgen:

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

Sie sind nicht Sie nicht das Szenario abdecken, in dem Sie keine Antwort haben:

if (typeof ans !== 'string') { 
    p.appendChild(document.createTextNode("The answer is forever blowing in the wind")); 
} 
+0

Edit: verpasste Var Fehler von @pimvdb – max

+0

Vielen Dank! Ich war so schlecht vor ein paar Wochen ... Wunder, was ich über diese erste Frage in 10 Jahren denke haha! – AlecPerkey

0

ich nicht in der Lage bin der jsFiddle zur Arbeit zu kommen, aber zwei Ihrer Probleme sind Ihre Vergleiche.

isNaN(obj.num1Value) = true 

ist keine rechtliche Aussage. Sie müssen dies ändern zu:

isNaN(obj.num1Value) == true 

Dies wird einen Vergleich durchführen. So würden die geänderten Zeilen wie folgt aussehen:

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

und:

case obj.div.checked && num2Value == 0 : alert("cannot divide by zero"); break; 

Die einzige Änderung in diesen beiden Fällen ist von = bis ==

0

Du verwechselst ändern die Zuordnung Operator (=) und der Gleichheitsvergleichsoperator (==).

Der Operator = wird verwendet, um einer Variablen einen Wert zuzuweisen.

Wenn Sie einen Wert mit true vergleichen wollen, verwenden Sie:

isNaN(obj.num1Value) == true 

Notiere die entfernt ! auch weil isNaN kehrt true für eine ungültige Zahl.

Zweitens haben Sie var num1Value, aber Sie greifen darauf zu, als ob das Objekt eine als solche bezeichnete Eigenschaft hat (obj.num1Value). Sie müssen beides verwenden, aber nicht beides (Sie speichern es an einem anderen Ort als dem, von dem Sie es abrufen).

+0

Vielen Dank für die Hilfe. Alles funktioniert jetzt perfekt ... Seltsames Ding ist Google Chrome scheint es egal zu sein, wenn ich die Objekteigenschaft als Variable referenziere. Das hat mich abgeworfen =/ – AlecPerkey

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

Sie sollten Ihren Code erklären und warum es hilft. – Reeno