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

Question

我正在用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);
}

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

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

Answer 3

您的JavaScript代码不正确-

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

2-当您调用函数时，只需在javascript中输入名称即可

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

函数add已经被定义

3. 同样，如果条件是否应该放在括号内，例如

   if（sign == 0）{}

4-不要在条件内分配值。 '='用于为varialbe赋值，'=='和'==='用于比较

Answer 4

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

如果您没有服务器端工作，则可以删除<form>标记并通过Javascript处理按钮单击事件。 并且代码也需要修改。 将<link>标记移到页面的<head>部分。 不要为每个按钮使用与“ click”事件处理程序相同的回调函数Calculator（）。 每个按钮（加，减，乘，除）的“单击”都有不同的回调。 和代码

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

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

必须在Calculator（）函数内移动，以便您每次单击“ =”时，都会提取ID为x和y的输入字段的当前值。