Создание простого калькулятора в Javascript с использованием объекта - PullRequest
0 голосов
/ 24 марта 2012

Я застрял на этом и не знаю, как исправить это сам. Я пытался использовать firebug и заставить его работать, но это так расстраивает и отнимает много времени для такого маленького сценария. Возможно, я неправильно использую оператор switch ...

По сути, я делаю очень простой калькулятор, используя объект впервые ... Любое немного поможет - любой толчок в правильном направлении:)

Большое спасибо за чтение!

Файл 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 ]

2 голосов
/ 24 марта 2012
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 иПеременная ´p´ один раз в верхней части функции resultArea:

    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"));
     }
    
0 голосов
/ 09 октября 2015

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>
0 голосов
/ 24 марта 2012

Вы путаете оператор присваивания (=) и оператор сравнения равенства (==).

Оператор = используется для присвоения значения переменной.

Если вы хотите сравнить значение с true, вы должны использовать:

isNaN(obj.num1Value) == true

Обратите внимание и на удаленный !, поскольку isNaN возвращает true для неверного номера.

Во-вторых, у вас есть var num1Value, но вы получаете к нему доступ, как будто у объекта есть свойство, называемое таковым (obj.num1Value). Вы должны использовать любой из них, но не оба (вы храните его в другом месте, отличном от того, откуда вы его извлекаете).

0 голосов
/ 24 марта 2012

Я не могу заставить работать 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;

Единственное изменение в обоих этих случаях заключается в изменении с = на ==

...