Question

我在Javascript中编写基本计算器，当我点击＆＃34; =＆＃34;在html表单上，它返回整个calculator.js，而不是结果。我不确定为什么会发生这种情况，我希望它能够提醒＆＃34;警告＆＃34;答案变量。如何才能正确显示？

calculator.html

<!DOCTYPE html>
<html>
<head><title>Calculator</title></head>
<link rel="stylesheet" type="text/css" href="calc.css"/>
<body>

<form>
    <p>
        <label for="x">First Number</label>
        <input type="text" name="x" id="x" />
    </p>
    <p>
        <label for="y">Second Number:</label>
        <input type="text" name="y" id="y" />
    </p>

    <p>
        <input type=radio name="Operation" value=Add id="0" /> <label for="0">Add</label>
        <input type=radio name="Operation" value=Sub id="1" /> <label for="1">Sub</label>
        <input type=radio name="Operation" value=Mult id="2" /> <label for="2">Mult</label>
        <input type=radio name="Operation" value=Div id="3" /> <label for="3">Div</label>
    </p>
    <p>
        <input type="submit" value="=" />
        <input type="reset" />
    </p>
</form>

<script type="text/javascript" src="calculator.js"></script>

</body>
</html>

calculator.js

var x = document.getElementById("x").value;
var y = document.getElementById("y").value;

document.getElementById("x").addEventListener("change", Calculator, false);
document.getElementById("y").addEventListener("change", Calculator, false);

var answer = 0;

document.getElementById(0).addEventListener("click", Calculator, false);
document.getElementById(1).addEventListener("click", Calculator, false);
document.getElementById(2).addEventListener("click", Calculator, false);
document.getElementById(3).addEventListener("click", Calculator, false);

function add(){
    answer = x+y;
}

function sub(){
    answer = x-y;
}

function mult(){
    answer = x*y;
}

function div(){
    if(y=0){
        alert "Cannot divide by zero"
    }
    else {answer = x/y}
}

function Calculator(){
    if sign == 0{
        add();
    }
    else if sign == 1{
        sub();
    }
    else if sign == 2{
        mult();
    }
    else if sign == 3{
        div();
    }

    alert (answer);
}

Answer 1

这是因为您已将表单操作定义为＆＃34; calculator.js＆＃34;。您只需要像HTML一样包含在HTML代码的末尾。

没有必要设置表单或表单方法，因为您不会发布/获取它，只能通过javascript处理它。

此外，每当更改x或y的值时，以下行将执行Calculator（）。我相信这不是你想要的......

document.getElementById("x").addEventListener("change", Calculator, false);
document.getElementById("y").addEventListener("change", Calculator, false);

准时：标志未定义，警报应警惕（回答）。我将根据您的javascript建议编辑我的回答。

建议：http://jsfiddle.net/xzkqvywf/

Answer 2

哇，javascript和HTML中有大量的语法和错误逻辑

一些额外的

在div函数中

，为y赋值为零

if(y=0){

您需要将id放在字符串中以调用getElementById

document.getElementById("0")

在任何时候你都没有设置＆＃34;的标志＆＃34;你用来比较

if (sign == 2)

您已使用提交按钮提交表单

<form action="calculator.js" method="GET">
<input type="submit" value="=" />

所以按下＆＃34; =＆＃34;按钮提交表单并发出文件的获取请求＆＃34; Calculator.js＆＃34;然后它在浏览器中呈现为输出。

尝试删除表单并处理按钮单击

<!DOCTYPE html>
<html>
<head><title>Calculator</title></head>
<link rel="stylesheet" type="text/css" href="calc.css"/>
<body>

<div>
    <p>
        <label for="x">First Number</label>
        <input type="text" name="x" id="x" />
    </p>
    <p>
        <label for="y">Second Number:</label>
        <input type="text" name="y" id="y" />
    </p>
    <p>
        <input type=radio name="Operation" value=Add id="0" /> <label for="0">Add</label>
        <input type=radio name="Operation" value=Sub id="1" /> <label for="1">Sub</label>
        <input type=radio name="Operation" value=Mult id="2" /> <label for="2">Mult</label>
        <input type=radio name="Operation" value=Div id="3" /> <label for="3">Div</label>
    </p>
    <p>
        <button id="go">=</button>
        <button id="reset" />reset</button>
    </p>
</div>
<script type="text/javascript" src="calculator.js"></script>
</body>
</html>

然后重写这样的代码。

(function() {

    var x,
        y,
        sign=0,
        answer=0;

    document.getElementById("0").addEventListener("click", setSign, false);
    document.getElementById("1").addEventListener("click", setSign, false);
    document.getElementById("2").addEventListener("click", setSign, false);
    document.getElementById("3").addEventListener("click", setSign, false);

    document.getElementById("reset").addEventListener("click", reset, false);
    document.getElementById("go").addEventListener("click", calc, false);

    function reset(e) {
        sign = 0;
        answer = 0;
    }

    function setSign(e) {
        sign = e.target.id; 
    }

    function add(){
        answer = x+y;
    }

    function sub(){
        answer = x-y;
    }

    function mult(){
        answer = x*y;
    }

    function div(){
        if(y==0){
            alert("Cannot divide by zero");
            return;
        }

        answer = x/y;
    }

    function calc(){

        x = parseFloat(document.getElementById("x").value);
        y = parseFloat(document.getElementById("y").value);

        if (sign == 1){
            sub();
        }
        else if (sign == 2){
            mult();
        }
        else if (sign == 3){
            div();
        }
        else {
            add();
        }

        alert(answer);
    }
})();

Answer 3

您的javascript代码不正确 -

1-将警报设为警报（回答）。

2-当你调用一个函数时，只需将名称放在javascript中，如

if (sign = 0){
      add();
    }

函数add已经定义为avove

此外，如果条件应该在像
这样的括号中
如果（符号== 0）{ }

4-如果条件不要在内部分配值。＆＃39; =＆＃39;用于为varialbe赋值，＆＃39; ==＆＃39;和＆＃39; ===＆＃39;用于比较

Answer 4

HTML表单应提交给服务器（例如：jsp，asp，php页面等）而不是Javascript文件。

如果您没有任何服务器端工作，可以删除＆lt; form＆gt;通过Javascript标记和处理按钮单击事件。而且代码也需要修改。移动＆lt; link＆gt;标记为＆lt; head＆gt;页面的一部分。不要为每个按钮使用相同的回调函数Calculator（）作为“click”事件处理程序。每个按钮（添加，减去，乘法，除法）“点击”都有不同的回调。和代码

var x = document.getElementById（“x”）。value;

var y = document.getElementById（“y”）。value;

必须在Calculator（）函数内移动，这样无论何时单击“=”，都会获取带有ids x和y的输入字段的当前值。

表单提交时在浏览器中显示Javascript代码，而不是脚本的结果

4 个答案: