Perhitungan Harga Tiket Dengan JavaScript
Dari soal diatas, tampilan akhir programnya diharapkan seperti gambar di bawah.
Untuk Skrip-nya dibawah ini, langsung Copas saja:
<html>
<head>
<title>Perhitungan Harga Tiket</title>
</head>
<style> table, th{ border: 1px solid DarkRed; width: 100%;}
.text, select{width: 40%;}
</style>
<script language="JavaScript">
function Hitung()
{
var hrgtiket;
var subtotal;
var totalnya;
var jmltiket = (document.FormTiket.tjmltiket.value);
var diskonnya;
var tujuan=(document.FormTiket.ttujuan.value);
if (tujuan=="Bandung") {
hrgtiket=100000;
}else if (tujuan=="Cirebon") {
hrgtiket=150000;
}else if (tujuan=="Surabaya") {
hrgtiket=200000;
}
subtotal = hrgtiket * jmltiket;
document.FormTiket.thrgtiket.value= hrgtiket;
document.FormTiket.tsubtotal.value= subtotal;
if(document.FormTiket.member.checked==true) {
diskonnya=0.1*subtotal;
}else {
diskonnya=0;
}
document.FormTiket.tdiskon.value= diskonnya;
totalnya = subtotal - diskonnya;
document.FormTiket.ttotal.value= totalnya;
}
</script>
<body>
<form name="FormTiket">
<table>
<th style="text-align: center;" colspan="6"><h3>Travel Bulan Jaya Abadi</h3></th>
<tr>
<td><label>Nama Pemesan</label></td>
<td>:</td>
<td><input type="text" name="tnama"></td>
<td><label>Harga Tiket</label></td>
<td>:</td>
<td><input type="text" name="thrgtiket"></td>
</tr>
<tr>
<td><label>Tujuan</label></td>
<td>:</td>
<td>
<select name="ttujuan">
<option value="Bandung">Bandung
<option value="Cirebon">Cirebon
<option value="Surabaya">Surabaya
</select>
</td>
<td><label>Sub Total</label></td>
<td>:</td>
<td><input type="text" name="tsubtotal"></td>
</tr>
<tr>
<td><label>Jumlah Tiket</label></td>
<td>:</td>
<td><input type="text" name="tjmltiket"></td>
<td><label>Diskon</label></td>
<td>:</td>
<td><input type="text" name="tdiskon"></td>
</tr>
<tr>
<td><label>Member</label></td>
<td>:</td>
<td><input type="checkbox" id="member" name="member"><label for="member"> Ya</label></td>
<td><label>Total Bayar</label></td>
<td>:</td>
<td><input type="text" name="ttotal"></td>
</tr>
<tr>
<td></td>
<td></td>
<td style="text-align: right;"><input type="button" value="Hitung" onClick="Hitung()"></td>
<td style="text-align: left;"><input type="reset" value="Ulang"></td>
<td></td>
<td></td>
</tr>
</table>
</form>
</body>
</html>
*** Jangan lupa simpan sebagai HTML
Komentar
Posting Komentar