[英]live form results using javascript
我正在尝试在表单字段下方提供一条消息。 该消息将取决于在两个字段中输入的内容。
我将如何进行制作,使其同时使用两个字段进行实时计算并将其传递给计算?
这是小提琴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;
秒当您检查不是数字时
应该看起来像
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);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.