前回のソースをHTML、CSS、JavaScriptに分けてみました。
は前回からの変更箇所。
前回のソースから削除されている部分もあります。
index.htmlと同じ階層に作成したlinksフォルダーにrule.cssとaction.jsを入れる。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>mm to pixel Conversion</title>
<link rel="stylesheet" type="text/css" href="links/rule.css">
</head>
<body bgcolor="#696969">
<script src="links/action.js"></script>
<center>
<div id="main_box">
<br>
<font size="4">mmとppi指定でpixel値を計算</font>
<p>
<input type="text" id="mmInput" size="5"
style="text-align:right">	mm  
<input type="text" id="ppiInput" size="5"
style="text-align:right">	ppi  
<button onclick="convertMMtoPixel()"
style="background-color: #ffd700">変換計算</button>  
<button onclick="window.location.reload();"
style="background-color: #40e0d0">リセット</button>
</p>
<p id="result"></p>
</div>
</center>
</body>
</html>
<!-- index.html -->
/* rule.css */
div#main_box {
height: 150px;
width: 500px;
background: #add8e6;
margin: 50px auto;
}
/* rule.css */
/* action.js */
function convertMMtoPixel() {
var mmValue =
parseFloat(document.getElementById("mmInput").value);
var ppi =
parseFloat(document.getElementById("ppiInput").value);
if (!isNaN(mmValue) && !isNaN(ppi)) {
var pixelValue = (mmValue * ppi) / 25.4;
var formattedPixelValue = pixelValue.toFixed(2);
document.getElementById("result").textContent =
ppi + "ppiの " + mmValue +
"mmは\u3000凡そ "+ formattedPixelValue + " pixels";
} else {
document.getElementById("result").textContent =
"無効な入力です。mmとppiに有効な数値を入力してください。";
}
}
/* action.js */
