5

フォームにテキストを入力して計算を行うスクリプトを書いています。何らかの理由で、私の計算はページの読み込みごとに1回だけ実行されます。「計算」ボタンを押したときに関数を再度実行するには、ページを更新する必要があります。

ボタンの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.";
        }
      }
   };

ページの読み込みごとに関数が複数回実行されないようにする何かをしていますか？

4

2 に答える 2

1

コードの問題は、ページが最初に読み込まれるときに、高、低、共通を設定するだけであるということです。これらの値は常に同じです。

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それが機能しているのを見てください これはあなたを助けるかもしれません。

于 2012-08-17T05:24:41.840 に答える
0

私にとっても、値をhigh、low、commonに変更すると、コードが機能しました。この方法を試してみてください。うまくいく可能性があります。

<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-16T16:52:40.967 に答える