Результаты в реальном времени с помощью javascript

Question

Я пытаюсь предоставить сообщение под полями формы. Сообщение будет зависеть от того, что введено в обоих полях.

Как я могу сделать это так, чтобы он вычислял в реальном времени, используя оба поля и передавая его через вычисление?

Вот скрипка http://jsfiddle.net/6qSeH/

Я использую это, чтобы получить документ значения

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

и это в конце концов, чтобы запустить функцию

yearCalculator(); 

Answer 1

Есть много отсутствующих pi eces в вашем коде.

Во-первых, вы написали код полностью используя javascript и пытаетесь использовать использовать синтаксис jQuery. Итак, как бы вы ожидали, что это сработает.

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

Второй При проверке не число

Он должен выглядеть

знач1 === 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); 
};