使用javascript的实时表单结果

live form results using javascript

本文关键字：表单 结果 实时 javascript 使用      更新时间：2023-09-26

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

我该如何使它使用两个字段并通过计算进行实时计算呢?

这里是小提琴http://jsfiddle.net/6qSeH/

我用它来获取文档值

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

和这个在最后运行函数

yearCalculator();

你的代码中有很多缺失的部分。

首先，你已经写了代码完全使用javascript，并试图使用jQuery语法。那么你希望它如何工作呢? 
jQuery to set HTML     ---   msg.html(value);
javascriptto set HTML  ---   msg.html = value;

Second当你检查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();

检查小提琴

您可以在两个输入字段中使用onchange="yearCalculator()"

首先将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);
};
相关文章：