球体の体積を計算するために使用される Modern Javascript の演習からの次の簡単なコードがあります。これには、半径の値が入力されていることを確認する部分が含まれています。
機能をテストするために負の数を入れたところ、機能しましたが、コンソールに何が表示されるのか興味があったので、確認しました。ログにエラーフラッシュが表示されてから消えます-読むのが速すぎます。
これは、if ステートメントが false と評価されたときに発生するものですか? このエラーが表示されてすぐにクリアされるのはなぜですか? これをデバッグする別の方法を使用できることは承知しています (別名、console.log を使用するか、他の方法で問題をログに記録します)。このエラーが消える理由に興味があります。
HTML:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Volume of a Sphere Calculator</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<!-- sphere.html -->
<form action="" method="post" id="theForm">
<fieldset>
<p>Use this form to calculate the volume of a sphere.</p>
<div>
<label for="radius">Radius</label>
<input type="text" name="radius" id="radius" required></div>
<div>
<label for="volume">Volume</label>
<input type="text" name="volume" id="volume"></div>
<div>
<input type="submit" value="Calculate" id="submit"></div>
</fieldset>
</form>
<script src="js/sphere.js"></script>
</body>
</html>
JS:
function calculate() {
'use strict';
var volume;
var radius = document.getElementById('radius');
if (radius && (radius.value > 0)){
volume = (4/3) * Math.PI * Math.pow(radius.value, 3);
}
volume = volume.toFixed(4);
document.getElementById('volume').value = volume;
return false;
}
function init() {
'use strict';
var theForm = document.getElementById('theForm');
theForm.onsubmit = calculate;
}
window.onload = init;