使用javascript生成表單結果

Question

我正在嘗試在表單的字段下方提供一條消息。該消息將取決於在兩個字段中輸入的內容。

我該如何去實現它，以便使用這兩個字段並通過計算來實時計算？

這裏是小提琴http://jsfiddle.net/6qSeH/

我使用該工具來獲取文檔值

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

，這在年底運行功能

yearCalculator(); 

Answer 1

有很多失蹤的pi在你的代碼中。

首先你寫的代碼完全使用javascript，並試圖使用jQuery語法。那麼你如何期待它的工作。

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

其次當你檢查非數字

它應該看起來像

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

Check Fiddle

Answer 2

可以使用的onchange = 「yearCalculator（）」在這兩個輸入文件中

Answer 3

首先改變class='message'到id='message'。然後嘗試下面的代碼：

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

function yearCalculator(value1, value2) { 
    msg.innerHTML=''; 
    val1 = parseInt(value1); 
    val2 = parseInt(value2); 
    if (val1 === "NAN" || val2 === "NAN") return; 


    var value1 = val1 - val2 + 18; 

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

    if (val1 < val2) { 
     if (val2 < value1) { 
      msg.innerHTML = "This is a good result"; 
     } else if (val2 > value1) { 
      msg.innerHTML = "This is a bad result"; 
     } else { 
      msg.innerHTML = "This is neither good or bad"; 
     } 
    } 
}; 
yearCalculator(yearOne,yearTwo); 
input1.onkeyup=function() { 
    yearCalculator(this.value,document.getElementById("input-mini2").value); 
}; 
input2.onkeyup=function() { 
    yearCalculator(document.getElementById("input-mini").value,this.value); 
};