我正在尝试使用HTML5和基本JavaScript构建一个简单的应用程序。我有它工作,但我做一个简单的事情(至少在我用过的其他语言中很简单)。这是我目前的代码:
<!DOCTYPE html>
<html>
<head>
<title>JS Test</title>
<meta charset="utf-8" />
</head>
<script>
function isTrackValid(track_a, track_b) {
if(track_a > 200.0 || track_a < 0.0) {
return "Number must be between 0 BPM and 200 BPM";
}
if(track_b > 200.0 || track_b < 0.0) {
return "Number must be between 0 BPM and 200 BPM";
}
return "";
}
function calculate(track_a, track_b) {
if(track_a > track_b) {
return ((track_a - track_b) / track_a) * 100;
} else if(track_a < track_b) {
return ((track_a - track_b) / track_b) * 100;
} else {
return 0.0;
}
}
function main() {
track_a = input_a.valueAsNumber;
track_b = input_b.valueAsNumber;
var message = isTrackValid(track_a, track_b);
if(message !== "") {
$('#error_message').text(message);
} else {
var result = calculate(track_a, track_b);
return result.toFixed(2);
}
}
</script>
<body>
<header>
<h1>JS Test</h1>
</header>
<form onsubmit="return false" oninput="o.value=eval(main());">
Track A: <input name="input_a" id="input_a" type="number" min="0.0" max="200.0" placeholder="Track A"><br/>
Track B: <input name="input_b" id="input_b" type="number" min="0.0" max="200.0" placeholder="Track B"><br/>
<br />
<div id="error_message"></div>
Output: <output name="o" step="0.01" for="a b"></output>
</form>
</body>
</html>
我想要的是,如果用户输入0到200之间的数字,我的<output>
就会显示。output
将根据上面的javascript计算出正确答案。如果用户输入负数,或者数字> 200,然后我希望将错误放在<output>
字段中。
使用当前代码(以及作为StackOverflow答案的<div>
),当发生错误时,它会超过Output
。但是,当用户输入有效数字时,此错误将保留在那里并且永远不会消失。
我想知道我是否可以让错误消失?或者我可以做些什么来让它Output
如果它无效?
答案 0 :(得分:0)
如果值有效,则不会删除
error
消息。另请注意,您可以使用eval
元素上的JavaScript Event Binding
绑定事件,而不是使用[type = number]
。
试试这个:
function isTrackValid(track_a, track_b) {
if (track_a > 200.0 || track_a < 0.0) {
return "Number must be between 0 BPM and 200 BPM";
}
if (track_b > 200.0 || track_b < 0.0) {
return "Number must be between 0 BPM and 200 BPM";
}
return "";
}
function calculate(track_a, track_b) {
if (track_a > track_b) {
return ((track_a - track_b) / track_a) * 100;
} else if (track_a < track_b) {
return ((track_a - track_b) / track_b) * 100;
} else {
return 0.0;
}
}
function main() {
track_a = input_a.valueAsNumber;
track_b = input_b.valueAsNumber;
var message = isTrackValid(track_a, track_b);
if (message !== "") {
$('#error_message').text(message);
} else {
$('#error_message').text(message);
var result = calculate(track_a, track_b);
return result.toFixed(2);
}
}
var elems = document.querySelectorAll('[type="number"]');
[].forEach.call(elems, function(elem) {
elem.addEventListener('input', main);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form onsubmit="return false">
Track A:
<input name="input_a" id="input_a" type="number" min="0.0" max="200.0" placeholder="Track A">
<br/>Track B:
<input name="input_b" id="input_b" type="number" min="0.0" max="200.0" placeholder="Track B">
<br/>
<br />
<div id="error_message"></div>
Output:
<output name="o" step="0.01" for="a b"></output>
</form>