Question

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

我如何制作它以便使用两个字段实时计算并通过计算？

我用它来获取文档值

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

Answer 2

您可以在两个输入字段中使用onchange =“year Calculator（）”

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

使用javascript的实时表单结果

3 个答案: