HTMLとJavaScriptで長さコンバーターを作成する方法【キロメートル→メートル変換】
HTMLとJavaScriptを組み合わせれば、キロメートル（km）をメートル（m）に変換するシンプルな長さコンバーターを簡単に作成できます。入力欄に数値を入れるたびにJavaScriptの関数が自動的に呼び出され、変換結果がリアルタイムで画面に反映される仕組みです。ここでは、実際に動くサンプルコードとその仕組みを詳しく解説します。
コード例
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
input,span{
font-size: 20px;
}
</style>
</head>
<body>
<h1>長さコンバーター</h1>
<h2>キロメートルを入力するとメートルに変換されます</h2>
<p>
<label>キロメートル</label>
<input id="inputKm" type="number" placeholder="Kilometers"
oninput="KmtoMConverter(this.value)" onchange="KmtoMConverter(this.value)">
</p>
<p>メートル: <span class="meters"></span></p>
<script>
function KmtoMConverter(length) {
document.querySelector(".meters").innerHTML=length*1000;
}
</script>
</body>
</html>
コードのポイント
- oninput属性：テキストボックスに値が入力されるたびに KmtoMConverter() 関数が呼び出されるため、入力中でも変換結果が即座に更新されます。
- onchange属性：値の確定時（フォーカスが外れたときなど）にも同じ関数が実行され、変換漏れを防ぎます。
- 変換ロジック：1キロメートル＝1,000メートルなので、入力値に1000を掛けるだけで変換が完了します。
- 結果の表示：querySelector() で class="meters" の span 要素を取得し、innerHTML に計算結果を書き込んで表示しています。
実行結果
上記のコードをブラウザで開くと、次のような画面が表示されます。
キロメートルの数値を入力すると、「メートル」欄に変換結果が自動的に表示されます。
この仕組みを応用すれば、センチメートルやマイル、フィートなどへの変換も、掛け算の係数を変えるだけで簡単に追加できます。単位変換ツールの基本形として、ぜひ活用してみてください。
-
HTMLとJavaScriptで作る重量コンバーター：kgをgに変換する方法
HTMLとJavaScriptを組み合わせれば、ブラウザ上で動作するシンプルな重量コンバーター（単位変換ツール）を簡単に作成できます。この記事では、キログラム（kg）を入力するとグラム（g）に自動変換して表示するウェイトコンバーターの実装方法を、サンプルコードとともにわかりやすく解説します。 実装コード例 以下のコードをそのままHTMLファイルとして保存し、ブラウザで開くだけで動作します。 <!DOCTYPE html> <html> <head> <style> body{
-
CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説
CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini