0

フォームのフィールドの下にメッセージを表示しようとしています。メッセージは、両方のフィールドに入力された内容によって異なります。

両方のフィールドを使用してリアルタイムで計算し、計算に渡すようにするにはどうすればよいですか?

ここにフィドルがありますhttp://jsfiddle.net/6qSeH/

これを使用してドキュメントの値を取得しています

var input1 = document.getElementById("input-mini");
var input2 = document.getElementById("input-mini2");

これは最後に関数を実行します

yearCalculator();
4

3 に答える 3

2

あなたのコードには多くの欠けている部分があります。

まず、javascript を使用して完全にコードを記述し、jQuery 構文を使用しようとしました。では、どのように機能することを期待しますか。

jQuery to set HTML     ---   msg.html(value);
javascriptto set HTML  ---   msg.html = value;

第二に Not a Number をチェックしているとき

次のように見えるはずです

val1 === NaN // 文字列ではありませんまた、 NaN が NaN と等しくなることはないため、 これは決して機能し ません

代わりisNaN()にメソッドを使用

三番

<div class="message"></div>

察するに

<div id="message"></div>

次に、入力にイベントを割り当てる必要があります。そうしないと、ページが初めて読み込まれたときにのみ機能します..

input1.addEventListener('change', yearCalculator);
input2.addEventListener('change', yearCalculator);

そうしないと、スクリプトが最初にロードされたときにのみ機能します。

クリーンアップされたコード

var input1 = document.getElementById("input-mini");
var input2 = document.getElementById("input-mini2");
var msg = document.getElementById('message');

input1.addEventListener('change', yearCalculator);
input2.addEventListener('change', yearCalculator);

function yearCalculator() {
   var yearOne = input1.value;
    var yearTwo = input2.value;
    val1 = parseInt(yearOne);
    val2 = parseInt(yearTwo);
    if (isNaN(val1) || isNaN(val2)) {
        msg.innerHTML = "Please enter a valid year !!";
        return;
    }
    var value1 = yearOne - yearTwo + 18;

    if (yearOne == yearTwo) {
        msg.innerHTML = "Both years are the same";
    }

    if (yearOne < yearTwo) {
        if (yearTwo < value1) {
            msg.innerHTML = "This is a good result";
        } else if (yearTwo > value1) {
            msg.innerHTML = "This is a bad result";
        } else {
            msg.innerHTML  = "This is neither good or bad";
        }
    }
    else {
      msg.innerHTML ="Year 1 is greater than Year 2";  
    }
};
yearCalculator();

フィドルをチェック

于 2013-05-19T23:10:59.003 に答える
1

両方の入力フィールドで onchange="yearCalculator()" を使用できます

于 2013-05-19T23:10:43.190 に答える