JavaScriptでプログラミング(5)
fake-engではそれっぽいプログラムとするために、円の面積・表面積を計算するプログラムを組んでいきましょう。円の半径を入力させて計算結果を表示させるものです。コードは以下の通り。見栄えをよくするためにCSSも少し当てています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2{
text-align:center;
}
#menseki,#hyomenseki
{
color: brown;
}
button{
width:100px;
}
label{
font-size: large;
font-weight: 100;
}
h1{
background-color: black;
color:white;
text-align: center;
}
</style>
</head>
<body>
<h1>円の面積・表面積</h1>
<hr>
<label>半径入力：<input id="inputbox" type="text"></label><br>
<button type="submit" id="hyoji" onclick="calc()">計算</button><button type="submit" onclick="clean()">クリア</button>
<hr>
<h2>面積:「<span id="menseki"></span>」</h2>
<h2>表面積：「<span id="hyomenseki"></span>」</h2>
<script>
var calc = function(){
var hankei= document.getElementById("inputbox");
var menseki= document.getElementById("menseki");
menseki.innerHTML=(Number(hankei.value)*Number(hankei.value)*3.14).toFixed(2);
var hyomenseki= document.getElementById("hyomenseki");
hyomenseki.innerHTML=(Number(hankei.value)*2*3.14).toFixed(2);
}
var clean = function(){
var menseki= document.getElementById("menseki");
var hyomenseki= document.getElementById("hyomenseki");
menseki.value="";
hyomenseki.value="";
location.reload();
}
</script>
</body>
</html>半径の入力された値をNumber関数で数値に変換してから計算しています。また、計算結果は小数点以下2桁となるように、toFixed関数を使用しています。
