Cara membuat program sederhana list
perjalanan pada html dengan javascript.
Program ini akan menampilkan daftar list
pejalanan dalam bentuk checkbox sesuai yang diinputkan user. Ketika user mengchecklist item perjalanan,
maka tulisan akan berubah seperti dicoret(line-through). Jika di unchecked maka
tulisan akan kembali normal.
Program ini membantu jika ada user yang
berkunjung ke suatu daerah. Lalu membuat list perjalanan.tempat mana saja yang
ingin dikunjungi. Jika sudah mengunjungi maka dichecklist.
File htmlnya, disimpan dg nama travellist.html.
<!DOCTYPE html>
<html>
<head>
<title>Latihan
Javascript</title>
<script
type="text/javascript" src="latjs1.js"></script>
<style
type="text/css">
</style>
</head>
<body>
<form
name="myTravelForm">
<label>First
Name: </label>
<input
type="text" name="firstname"/>
<br/>
<label>Last
Name: </label>
<input
type="text" name="lastname"/>
<br/>
<label>Destination:
</label>
<select
name="destination">
<option
value="antarctica">London</option>
<option
value="costarica">Bandung</option>
<option
value="malang" selected>Malang</option>
</select>
<br/>
<input
type="button" value="Add this traveller"
onclick="prosesTravelForm()"/>
<br/><br/>
<div
id="travellerInfo"></div>
</form>
</body>
</html>
File javascriptnya disimpan
dengan nama: latjs1.js
function prosesTravelForm(){
var
fn,ln,dest,d;
fn=document.myTravelForm.firstname.value;
ln=document.myTravelForm.lastname.value;
dest=document.myTravelForm.destination.value;
d="<br/><div>"+fn+"
"+ln+" goto "+dest+"</div>"
document.getElementById("travellerInfo").innerHTML=document.getElementById("travellerInfo").innerHTML+d;
}
Jika ingin
mencoret value pada checkbox maka kita akan memanipulasinya dengan memanipulasi
menggunakan text-decoration dengan value line. Masalahnya adalah bagaimana kita
bisa bilang pada html agar list ke x yg dicoret.
Maka kita harus
memberi id pada div. masalahnya lagi adalah. Id tidak boleh ada yang sama. Maka
kita akan menggunakan variable untuk membedakannya. Misal item1 item2 item3.
Nah itemnya static, tetapi angka 1,2,3 nya bisa dinamis. Untuk membuatnya kita
harus membuat variable global di dalam file javascript. Misal variable i. diset
1. Mengapa variable global? Karena agar tidak di destroy saat pemanggilan fungsi (baca:penghancuran variable dalam
fungsi setiap fungsi dipanggil).
Kemudian setting
div sebagai berikut:
var i=1;
function processForm(){
var
listItem,listed;
listItem=document.myChecklistForm.checklistitem.value;
listed="<div id='item"+i+"'><input
type='checkbox' onclick=’ crossedOut(\'item”+i+”\')’/>"+listItem+" ->item"+i+"</div>";
i++;
document.getElementById("checkList").innerHTML=document.getElementById("checkList").innerHTML+listed;
}
->item"+i+"
hanya
untuk mengecek apakah variable i sudah bertambah/belum.
Lalu kita akan
menambahkan event ‘onclick’ di textboxnya yang memanggil fungsi ‘crossOut(n)’ yang berisi parameter si i. fungsi ‘crossOut(n)’
ini yang nantinya akan membuat textbox yang di pilih akan berubah teksnya
menjadi dicoret(line through).
O iya, kita juga
harus menambahkan class dengan nama ‘checked-off’ yang berisi settingan
text-decoration:line-through. Dan class dengan nama ‘checked-on’ untuk jika
sewaktu-waktu user ingin membatalkan item yang sudah dicek Class bisa dibuat di
halaman css lain atau bisa dihalaman htmlnya. Disini saya akan membuat langsung
dihalaman htmlnya. Berikut cuplikannya J :
<!DOCTYPE html>
<html>
<head>
<title>Latihan javascript</title>
<script type="text/javascript"
src="latjs1.js"></script>
<style>
. checkedoff{
text-decoration:line-through;
color:red;
}
</style>
</head>
<body>
<form name="myChecklistForm">
<input type="text"
name="checklistitem" />
<input type="button" value="Add to
List" onclick="processForm()"/>
</form>
<div id="checkList"></div>
</body>
</html>
Lalu kita buat
fungsi crossOut(n) pada file javascriptnya dengan syntax seperti berikut:
function crossedOut(n){
document.getElementById(n).className="checkedoff";
}
Semoga
bermanfaat :)
Komentar
Posting Komentar