我試圖使用HTML5和基本JavaScript構建一個簡單的應用程序。我有它的工作,但我在做一件簡單的事情時遇到了麻煩(至少在我用過的其他語言中是簡單的)。這裏是我當前的代碼:在HTML表單上顯示錯誤消息,然後,在用戶更正錯誤後刪除此消息
<!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>
我想有什麼,是我<output>
如果用戶輸入0到200這output
之間的數字將有來自上面的JavaScript計算出正確的答案出現。如果用戶輸入一個負數,或者數字> 200,那麼我想把錯誤放在<output>
字段中。
使用當前代碼(以及作爲StackOverflow上的答案的結果的<div>
),當發生錯誤時,它會高於Output
。但是,當用戶輸入一個有效的號碼時,這個錯誤就會停留在那裏,並且永遠不會消失。
我想知道是否可以讓錯誤消失嗎?或者有什麼我可以做的,只是讓它去Output
如果它是無效的?
添加小提琴請 –
@GopsAB通過的jsfiddle這樣做似乎沒有顯示錯誤:https://開頭的jsfiddle。 net/jthjzsjx/ – Alex
包含了jquery的_ $('#error_message')。text(message); _? – C2486