javascript ガロン (gallon)からリットル(L)に変換する

作成日 2022.09.06
javascript
javascript

javascriptで、ガロン (gallon)からリットル(L)に変換するサンプルコードを記述してます。

1. 環境
2. ガロン (gallon)からリットル(L)に変換
3. サンプルコード

環境

OS windows11 home
ブラウザ chrome 104.0.5112.101

Javascript サンプル集はこちら

ガロン (gallon)からリットル(L)に変換

ガロン (gallon)からリットル(L)に変換するには「1ガロン (gallon)＝3.78リットル(L)」なので、この計算式を使用するだけとなります。

function ch(num){

    return num * 3.78

}

console.log( ch(3) ) // 11.34

逆に、リットル(L)からガロン (gallon)に変更する場合は、以下となります。

function ch(num){

    return num / 3.78

}

console.log( ch(11.34) ) // 3

サンプルコード

以下は、実行ボタンをクリックすると、入力した数値をガロン (gallon)として、リットル(L)に変換して表示するだけのサンプルコードとなります。

※cssには「Material Design for Bootstrap」を使用してます。関数はアロー関数を使用してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

${}(テンプレートリテラル)の使い方

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>

<div class="container text-center w-25" style="margin-top:200px">

  <h2><span id="result" class="badge bg-warning">実行結果</span></h2>

  <form name="frm">
    <input type="number" id="n" class="form-control w-50 mx-auto" />
  </form>

  <button id="btn" class="btn btn-dark btn-rounded mt-1">実行</button>

</div>

  <script>

    const ch = (num) => {

      return num * 3.78

    }

    btn.onclick = () => {

      result.innerHTML = `${ch(n.value)}L`

    }

  </script>
</body>

</html>

計算されていることが確認できます。