How To

Cara Membuat Konversi Berat Dengan Javascript

Review by : Sutiono S.Kom., M.Kom., M.T.I

Section Artikel

1 Konverter Berat
2 Buat Pengonversi Berat

Konverter Berat

Di bawah ini kita akan mempelajari cara membuat konverter berat dengan HTML dan JavaScript.

Buat Pengonversi Berat

Buat elemen masukan yang dapat mengonversi nilai dari satu pengukuran bobot ke pengukuran lainnya.

Langkah 1) Tambahkan HTML:
Contoh – Pound ke Kilogram

<p>
  <label>Pounds</label>
  <input id="inputPounds" type="number" placeholder="Pounds"
  oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Grams: <span id="outputGrams"></span></p>

Langkah 2) Tambahkan JavaScript:
Contoh – Pound ke Kilogram

/* Saat field inputan menerima masukan, konversikan nilai dari pound ke kilogram */function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML = valNum / 0.0022046;
}

Mengkonversi dari Pound ke Pengukuran lain

Tabel di bawah ini menunjukkan cara mengonversi dari Pound ke pengukuran berat lainnya:

Mengkonversi dari Pound ke Kilogram

Rumus : kg = lb / 2.2046

function weightConverter(valNum) {
  document.getElementById("outputKilograms").innerHTML=valNum/2.2046;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Pound ke Kilogram </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di field Pounds untuk mengonversi nilai ke Kilograms: </p>

<p>
  <label>Pounds</label>
  <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Kilograms: <span id="outputKilograms"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputKilograms").innerHTML=valNum/2.2046;
}
</script>

</body>
</html>

Konversi dari Pound ke Ons

Rumus : oz = lb * 16

function weightConverter(valNum) {
  document.getElementById("outputOunces").innerHTML=valNum*16;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Pound ke Ons </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di field Pounds untuk mengonversi nilai menjadi Ons: </p>

<p>
  <label>Pounds</label>
  <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Ons: <span id="outputOunces"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputOunces").innerHTML=valNum*16;
}
</script>

</body>
</html>

Mengkonversi dari Pound ke Gram

Rumus : g = lb / 0,0022046

function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML=valNum/0.0022046;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Pound ke Gram </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di field Pounds untuk mengonversi nilai menjadi Gram: </p>

<p>
  <label>Pounds</label>
  <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Grams: <span id="outputGrams"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML=valNum/0.0022046;
}
</script>

</body>
</html>

Mengkonversi dari Pound ke Stones

Rumus : st = lb * 0,071429

function weightConverter(valNum) {
  document.getElementById("outputStones").innerHTML=valNum*0.071429;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Pound ke Stones </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di field Pounds untuk mengonversi nilai menjadi Stones: </p>

<p>
  <label>Pounds</label>
  <input id="inputPounds" type="number" placeholder="Pounds" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Stones: <span id="outputStones"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputStones").innerHTML=valNum*0.071429;
}
</script>

</body>
</html>

Mengkonversi dari Kilogram ke Pengukuran lain

Tabel di bawah ini menunjukkan cara mengonversi dari Kilogram ke pengukuran berat lainnya:

Mengkonversi dari Kilogram ke Pound

Rumus : lb = kg * 2.2046

function weightConverter(valNum) {
  document.getElementById("outputPounds").innerHTML=valNum*2.2046;
}

<!DOCTYPE html>
<html>
<title> Pengonversi Berat Kilogram ke Pounds  </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Kilograms untuk mengubah nilai menjadi Pounds: </p>

<p>
  <label>Kilograms</label>
  <input id="inputKilograms" type="number" placeholder="Kilograms" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Pounds: <span id="outputPounds"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputPounds").innerHTML=valNum*2.2046;
}
</script>

</body>
</html>

Mengkonversi dari Kilogram ke Ons

Rumus : oz = kg * 35.274

function weightConverter(valNum) {
  document.getElementById("outputOunces").innerHTML=valNum*35.274;
}

<!DOCTYPE html>
<html>
<title> Pengonversi Berat Kilogram ke Ons  </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Kilogram untuk mengubah nilai menjadi Ons: </p>

<p>
  <label>Kilograms</label>
  <input id="inputKilograms" type="number" placeholder="Kilograms" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Ons: <span id="outputOunces"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputOunces").innerHTML=valNum*35.274;
}
</script>

</body>
</html>

Mengkonversi dari Kilogram ke Gram

Rumus : g = kg * 1000

function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML=valNum*1000;
}

<!DOCTYPE html>
<html>
<title> Pengonversi Berat Kilogram ke Gram </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Kilogram untuk mengubah nilai menjadi Gram: </p>

<p>
  <label>Kilograms</label>
  <input id="inputKilograms" type="number" placeholder="Kilograms" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Grams: <span id="outputGrams"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML=valNum*1000;
}
</script>

</body>
</html>

Mengkonversi dari Kilogram ke Stones

Rumus : st = kg * 0.1574

function weightConverter(valNum) {
  document.getElementById("outputStones").innerHTML=valNum*0.1574;
}

<!DOCTYPE html>
<html>
<title> Pengonversi Berat Kilogram ke Stones </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di bidang Kilograms untuk mengubah nilai menjadi Stones: </p>

<p>
  <label>Kilograms</label>
  <input id="inputKilograms" type="number" placeholder="Kilograms" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Stones: <span id="outputStones"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputStones").innerHTML=valNum*0.1574;
}
</script>

</body>
</html>

Mengkonversi dari Ons ke Pengukuran lain

Tabel di bawah ini menunjukkan cara mengonversi dari Ons ke ukuran berat lainnya:

Konversi dari Ons ke Pound

Rumus : lb = oz * 0,0625

function weightConverter(valNum) {
  document.getElementById("outputPounds").innerHTML=valNum*0.0625;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Ons ke Pounds  </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Ons untuk mengubah nilai menjadi Pounds: </p>

<p>
  <label>Ons</label>
  <input id="inputOunces" type="number" placeholder="Ounces" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Pounds: <span id="outputPounds"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputPounds").innerHTML=valNum*0.0625;
}
</script>

</body>
</html>

Mengkonversi dari Ons ke Kilogram

Rumus : kg = oz / 35.274

function weightConverter(valNum) {
  document.getElementById("outputKilograms").innerHTML=valNum/35.274;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Ons ke Kilogram </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Ons untuk mengubah nilai menjadi Kilogram: </p>

<p>
  <label>Ons</label>
  <input id="inputOunces" type="number" placeholder="Ounces" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Kilograms: <span id="outputKilograms"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputKilograms").innerHTML=valNum/35.274;
}
</script>

</body>
</html>

Mengkonversi dari Ons ke Gram

Rumus : g = oz / 0,035274

function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML=valNum/0.035274;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Ons ke Gram </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Ons untuk mengubah nilai menjadi Gram: </p>

<p>
  <label>Ons</label>
  <input id="inputOunces" type="number" placeholder="Ounces" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Grams: <span id="outputGrams"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML=valNum/0.035274;
}
</script>

</body>
</html>

Mengkonversi dari Ons ke Stones

Rumus : st = oz * 0,0044643

function weightConverter(valNum) {
  document.getElementById("outputStones").innerHTML=valNum*0.0044643;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Ons ke Stones </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Ons untuk mengubah nilai menjadi Stones: </p>

<p>
  <label>Ons</label>
  <input id="inputOunces" type="number" placeholder="Ounces" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Stones: <span id="outputStones"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputStones").innerHTML=valNum*0.0044643;
}
</script>

</body>
</html>

Mengkonversi dari Gram ke Pengukuran lain

Tabel di bawah ini menunjukkan cara mengonversi dari Gram ke pengukuran berat lainnya:

Mengkonversi dari Gram ke Pound

Rumus : lb = g * 0,0022046

function weightConverter(valNum) {
  document.getElementById("outputPounds").innerHTML=valNum*0.0022046;
}

<!DOCTYPE html>
<html>
<title> Pengonversi Gram ke Pounds </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Gram untuk mengubah nilai menjadi Pounds: </p>

<p>
  <label>Grams</label>
  <input id="inputGrams" type="number" placeholder="Grams" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Pounds: <span id="outputPounds"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputPounds").innerHTML=valNum*0.0022046;
}
</script>

</body>
</html>

Mengkonversi dari Gram ke Kilogram

Rumus : kg = g / 1000

function weightConverter(valNum) {
  document.getElementById("outputKilograms").innerHTML=valNum/1000;
}

<!DOCTYPE html>
<html>
<title> Pengonversi Berat Gram ke Kilogram </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Gram untuk mengubah nilai menjadi Kilogram: </p>

<p>
  <label>Grams</label>
  <input id="inputGrams" type="number" placeholder="Grams" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Kilograms: <span id="outputKilograms"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputKilograms").innerHTML=valNum/1000;
}
</script>

</body>
</html>

Mengkonversi dari Gram ke Ons

Rumus : oz = g * 0,035274

function weightConverter(valNum) {
  document.getElementById("outputOunces").innerHTML=valNum*0.035274;
}

<!DOCTYPE html>
<html>
<title> Pengonversi Gram ke Ons Berat </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketikkan nilai di fields Gram untuk mengonversi nilai menjadi Ons: </p>

<p>
  <label>Grams</label>
  <input id="inputGrams" type="number" placeholder="Grams" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Ons: <span id="outputOunces"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputOunces").innerHTML=valNum*0.035274;
}
</script>

</body>
</html>

Mengkonversi dari Gram ke Stones

Rumus : st = g * 0,00015747

function weightConverter(valNum) {
  document.getElementById("outputStones").innerHTML=valNum*0.00015747;
}

<!DOCTYPE html>
<html>
<title> Pengubah Berat Gram ke Stones </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Gram untuk mengubah nilai menjadi stones: </p>

<p>
  <label>Grams</label>
  <input id="inputGrams" type="number" placeholder="Grams" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Stones: <span id="outputStones"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputStones").innerHTML=valNum*0.00015747;
}
</script>

</body>
</html>

Mengkonversi dari Stones ke Pengukuran lain

Tabel di bawah ini menunjukkan cara mengonversi dari Stones ke pengukuran berat lainnya:

Konversi dari Stones ke Pound

Rumus : lb = st * 14

function weightConverter(valNum) {
  document.getElementById("outputPounds").innerHTML=valNum*14;
}

<!DOCTYPE html>
<html>
<title> Pengonversi Stones ke Pounds </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Stones untuk mengubah nilai menjadi Pound: </p>

<p>
  <label>Stones</label>
  <input id="inputStones" type="number" placeholder="Stones" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Pounds: <span id="outputPounds"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputPounds").innerHTML=valNum*14;
}
</script>

</body>
</html>

Mengkonversi dari Stones ke Kilogram

Rumus : kg = st / 0.15747

function weightConverter(valNum) {
  document.getElementById("outputKilograms").innerHTML=valNum/0.15747;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Stones ke Kilogram </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Stones untuk mengonversi nilai menjadi Kilogram: </p>

<p>
  <label>Stones</label>
  <input id="inputStones" type="number" placeholder="Stones" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Kilograms: <span id="outputKilograms"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputKilograms").innerHTML=valNum/0.15747;
}
</script>

</body>
</html>

Konversi dari Stones ke Ons

Rumus : oz = st * 224

function weightConverter(valNum) {
  document.getElementById("outputOunces").innerHTML=valNum*224;
}

<!DOCTYPE html>
<html>
<title> Konverter Stones ke Ons Berat </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Stones untuk mengubah nilai menjadi Ons: </p>

<p>
  <label>Stones</label>
  <input id="inputStones" type="number" placeholder="Stones" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Ons: <span id="outputOunces"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputOunces").innerHTML=valNum*224;
}
</script>

</body>
</html>

Mengkonversi dari Stones ke Gram

Rumus : g = st / 0,00015747

function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML=valNum/0.00015747;
}

<!DOCTYPE html>
<html>
<title> Konverter Berat Stones ke Gram </title>
<body>

<h2> Pengonversi Berat </h2>
<p> Ketik nilai di fields Stones untuk mengonversi nilai menjadi Gram: </p>

<p>
  <label>Stones</label>
  <input id="inputStones" type="number" placeholder="Stones" oninput="weightConverter(this.value)" onchange="weightConverter(this.value)">
</p>
<p>Grams: <span id="outputGrams"></span></p>

<script>
function weightConverter(valNum) {
  document.getElementById("outputGrams").innerHTML=valNum/0.00015747;
}
</script>

</body>
</html>

Hanifah Nurbaeti

Tags: How Tojavascript