在表單提交時顯示在瀏覽器中的Javascript代碼，而不是腳本的結果

我正在用Javascript寫一個基本的計算器，當我在html表單上打「=」時，它將返回整個calculator.js，而不是結果。我不知道爲什麼會發生這種情況，我希望它能「警告」答案變量。我怎樣才能讓它正確顯示？在表單提交時顯示在瀏覽器中的Javascript代碼，而不是腳本的結果

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

來源

2014-10-22 Virge Assault

這是發生，因爲已經定義了你的形式行動「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/

來源

2014-10-22 04:25:45 fmenna

你的JavaScript代碼不正確─

1-認沽警覺警報（答案）。

2 - 當你打電話只是把名字中的JavaScript像

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

功能的附加功能已經avove

同樣if和else if條件定義應該是在一個托架等

如果（符號== 0）{ }

4-不要在條件內分配值。 '='用於賦值給變量，'=='和'==='用於比較

來源

2014-10-22 04:27:40 RahulB

一個HTML表單被提交給一個服務器（例如：jsp，asp，php頁面等）而不是一個JavaScript文件。

如果您沒有任何服務器端工作要做，您可以刪除<表格>標記並通過Javascript處理按鈕單擊事件。而且代碼也需要修改。將<鏈接>標記移動到<頭部>頁面的一部分。不要對每個按鈕使用相同的回調函數Calculator（）作爲「單擊」事件處理函數。對每個按鈕（加，減，乘，除）都有不同的回調「點擊」。代碼

var x = document.getElementById（「x」）。value;

var y = document。。的getElementById（「Y」）值;

必須在Calculator（）函數內移動，這樣，無論您何時單擊「=」，都將獲取帶有ids x和y的輸入字段的當前值。

來源

2014-10-22 04:37:29

哇，還有在JavaScript和HTML

一些額外的那些

在div功能

你爲零

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

來源

2014-10-22 04:37:52

在表單提交時顯示在瀏覽器中的Javascript代碼，而不是腳本的結果

回答

相關問題