月曜日, 8月 21, 2023

HTMLのコーディングは一気に設計すると奈落に落ちます(02)

mm値だけでなく解像度の入力も求めるように変更。
   は前回からの変更箇所。
前回のソースから削除されている部分もあります。

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<title>mm to pixel Conversion</title>
</head>
<body bgcolor="#f5f5f5">
<p>mm値は?:</p>
<input type="text" id="mmInput">
<p>dpi (dot per inch)値は?:</p>
<input type="text" id="dpiInput">
<!-- dpi値を入力 -->
<button onclick="convertMMtoPixel()">変換</button>
<p id="result"></p>
<script>
function convertMMtoPixel() {
var mmValue =
parseFloat(document.getElementById("mmInput").value);
var dpi =
parseFloat(document.getElementById("dpiInput").value);
/* 入力したdpi値を数値に変換。 */
if (!isNaN(mmValue) && !isNaN(dpi)) {
var pixelValue = mmValue * dpi / 25.4;
document.getElementById("result").textContent =
mmValue + " mm は凡そ " + pixelValue + " pixels";
} else {
document.getElementById("result").textContent =
"無効な入力です。mmとdpiに有効な数値を入力してください。";
}
}
</script>
</body>
</html>
<!-- index.html -->

解像度の入力も求めるように変更。