最後にpixelとmm値からdpi値を求めてみます。
dpi = pixel × 25.4 ÷ mm
は前回からの変更箇所。
前回のソースから削除されている部分もあります。
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>ppi 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">pixelとmm指定でppi値を計算</font>
<p>
<input type="text" id="pixelInput" size="5"
style="text-align:right">	pixel  
<input type="text" id="mmInput" size="5"
style="text-align:right">	mm  
<button onclick="CalculatePPI()"
style="background-color: #7fffd4">変換計算</button>  
<button onclick="window.location.reload();"
style="background-color: #ffb6c1">リセット</button>
</p>
<p id="result"></p>
</div>
</center>
</body>
</html>
<!-- index.html -->
/* rule.css */
div#main_box {
height: 150px;
width: 500px;
background: #ffefd5; /* papayawhip */
margin: 50px auto;
}
/* rule.css */
/* action.js */
function CalculatePPI() {
var pixelValue =
parseFloat(document.getElementById("pixelInput").value);
var mmValue =
parseFloat(document.getElementById("mmInput").value);
if (!isNaN(pixelValue) && !isNaN(mmValue) && mmValue !== 0) {
var ppiValue = (pixelValue * 25.4 ) / mmValue;
var formattedPPIValue = ppiValue.toFixed(2);
document.getElementById("result").textContent =
pixelValue + "pixelの " + mmValue +
"mmは\u3000凡そ "+ formattedPPIValue + "ppi";
} else {
document.getElementById("result").textContent =
"無効な入力です。pixelとmmに有効な数値を入力してください。";
}
}
/* action.js */
前回、前々回の・・・
HTMLのコーディングは一気に設計すると奈落に落ちます（06）2023/08/29
HTMLのコーディングは一気に設計すると奈落に落ちます（05）2023/08/27
との差異を確認してください。
