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

【问题标题】：Javascript code displaying in browser when form submitted, not the result of the script提交表单时在浏览器中显示的 Javascript 代码，而不是脚本的结果
【发布时间】：2014-10-22 04:01:59
【问题描述】：

我正在用 Javascript 编写一个基本的计算器，当我在 html 表单上点击“=”时，它返回的是整个calculator.js，而不是结果。我不确定为什么会发生这种情况，我希望它“提醒”答案变量。我怎样才能让它正确显示？

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

【问题讨论】：

标签： javascript html forms javascript-events

【解决方案1】：

发生这种情况是因为您已将表单操作定义为“calculator.js”。您只需要在 HTML 代码的末尾包含，就像您所做的那样。

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

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

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

准时：符号未定义，警报应为警报（答案）。我将根据您的 javascript 建议编辑我的答案。

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

【讨论】：

【解决方案2】：

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

一些额外的

在 div 函数中，您将 y 赋值为零

if(y=0){

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

document.getElementById("0")

您绝不会设置用于比较的“符号”的值

if (sign == 2)

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

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

因此按下“=”按钮提交表单并发出对文件“Calculator.js”的获取请求，然后将其呈现为浏览器中的输出。

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

<!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);
    }
})();

【讨论】：

【解决方案3】：

您的 javascript 代码不正确-

1- 将警报作为警报（答案）。

2- 当你调用一个函数时，只需在 javascript 中输入名称

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

函数 add 已经被定义了

if 和 else if 条件也应该放在括号中

如果（符号==0）{ }

4- 不要在 if 条件中赋值。 '=' 用于给变量赋值，'==' 和 '===' 用于比较

【讨论】：

【解决方案4】：

HTML 表单旨在提交到服务器（例如：jsp、asp、php 页面等）而不是 Javascript 文件。

如果您没有任何服务器端工作要做，您可以删除

【讨论】：