爲什麼我的函數只在每頁加載時運行一次？

我正在寫一個腳本，用表單中的文本輸入進行計算。出於某種原因，我的計算僅在每頁加載時執行一次。當我按下「計算」按鈕時，我必須刷新頁面以使功能再次運行。爲什麼我的函數只在每頁加載時運行一次？

下面是我的按鈕的HTML：

<input type="button" value="Calculate" onclick="calculate(high, low, common);" /> 
<input type="reset" /> 
<div id="result"></div>

這裏是計算功能（變量別處定義）：

var calculate = function (high, low, common) { 
    if (high.length < 1 || low.length < 1 || common.length <1) { 
     document.getElementById('result').innerHTML="Please enter a number for all fields."; 
    } else { 
     if ((high - common) > (common - low)) { 
      document.getElementById('result').innerHTML="Result 1."; 
     } else if ((common - low) > (high - common)) { 
     document.getElementById('result').innerHTML="Result 2."; 
     } else if ((common - low) === (high - common)) { 
     document.getElementById('result').innerHTML="Result 3."; 
     } 
     } 
    };

我做的東西，防止功能運行超過每頁加載一次？

來源

2012-08-16 hlh

「高，低，普通」從哪裏來？ – j08691 2012-08-16 16:41:20

代碼工作正常，如果我們改變這三個值的值。產出在變化。你能創建一個你的代碼的jsfiddle嗎？ – Abhishek 2012-08-16 16:44:26

@Abhishek，這是一整頁的小提琴。出於某種原因，我的程序現在也不會超過第一個if/else語句。 http://jsfiddle.net/vdrwh/ – hlh 2012-08-16 17:56:34

您的問題與您的代碼的工作，你只設置高，低，通常第一次加載頁面。這些值始終保持相同。

你應該在onclick事件中傳遞你的值。

更新您 - jsfiddle

<!DOCTYPE html> 
<html> 
<head> 
    <title>Calculator</title> 
    <meta charset = "UTF-8" /> 
</head> 
<body> 

<h1>Calculator</h1> 

<!--Form forvalue inputs--> 

<form> 
    <label for="highRi">Highest:</label><input type ="text" id="highRi" /> 
    <label for="lowRi">Lowest:</label><input type="text" id="lowRi" /> 
    <label for="comm">Common Point:</label><input type ="text" id="comm" /> 

<!--Clicking the button should run the calculate() function--> 

    <input type="button" value="Calculate" onclick="calculate(document.getElementById('highRi').value, document.getElementById('lowRi').value, document.getElementById('comm').value);" /> 
    <input type="reset" /> 

<!--Div will populate with result after calculation is performed--> 

    <div id="result"></div> 
</form> 

<script type="text/javascript"> 


var calculate = function (high, low, common) { 
    if (high.length < 1 || low.length < 1 || common.length <1) { 
     document.getElementById('result').innerHTML="Please enter a number for all fields."; 
    } else { 
     if ((high - common) > (common - low)) { 
      document.getElementById('result').innerHTML="Result 1."; 
     } else if ((common - low) > (high - common)) { 
     document.getElementById('result').innerHTML="Result 2."; 
     } else if ((common - low) === (high - common)) { 
     document.getElementById('result').innerHTML="Result 3."; 
    } 
} 

}; 

</script> 

</body> 
</html>

或者你可以簡單地得到這些元素的值在你的函數調用。

<!DOCTYPE html> 
<html> 
<head> 
<title>Calculator</title> 
<meta charset = "UTF-8" /> 
</head> 
<body> 

<h1>Calculator</h1> 

<!--Form forvalue inputs--> 

<form> 
    <label for="highRi">Highest:</label><input type ="text" id="highRi" /> 
    <label for="lowRi">Lowest:</label><input type="text" id="lowRi" /> 
    <label for="comm">Common Point:</label><input type ="text" id="comm" /> 

<!--Clicking the button should run the calculate() function--> 

    <input type="button" value="Calculate" onclick="calculate();" /> 
    <input type="reset" /> 

<!--Div will populate with result after calculation is performed--> 

    <div id="result"></div> 
</form> 

<script type="text/javascript"> 


var calculate = function() { 
    var high = document.getElementById('highRi').value; 
    var low = document.getElementById('lowRi').value 
    var common = document.getElementById('comm').value 
    if (high.length < 1 || low.length < 1 || common.length <1) { 
     document.getElementById('result').innerHTML="Please enter a number for all fields."; 
    } else { 
     if ((high - common) > (common - low)) { 
      document.getElementById('result').innerHTML="Result 1."; 
     } else if ((common - low) > (high - common)) { 
     document.getElementById('result').innerHTML="Result 2."; 
     } else if ((common - low) === (high - common)) { 
     document.getElementById('result').innerHTML="Result 3."; 
    } 
} 

}; 

</script>

的jsfiddle See it working 可能這會幫助你。

來源

2012-08-17 05:24:41 Abhishek

我也，你的代碼工作，如果我改變高，低和共同的價值觀，試試這個方法，它可用於

<input type="button" id="button" value="Calculate" /> 

var button = document.getElementById("button"); 
var high = document.getElementById("high").value; 
var low = document.getElementById("low").value; 
var common = document.getElementById("common").value; 
button.addEventListener(onclick, calculate(high, low, common));

來源

2012-08-16 16:52:40 Shreedhar

爲什麼我的函數只在每頁加載時運行一次？

回答

相關問題