javascript - 使用 JavaScript 实时生成结果

Question

我试图在表单字段下方提供一条消息。该消息将取决于两个字段中输入的内容。

我将如何制作它，以便它使用这两个字段进行实时计算并将其传递给计算？

这是 fiddle http://jsfiddle.net/6qSeH/

我用它来获取文档值

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

最后运行该函数

yearCalculator();

Answer 1

您的代码中有许多缺失的部分。

首先，您完全使用 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