Cara Mengambil Nilai HTML Dengan JavaScript

Cara Mengambil Nilai HTML dengan
JavaScript
01 Dec 14 | Andre | Tutorial JavaScript | 32 Comments
Dalam artikel tanya-jawab pemrograman duniailkom kali ini, saya akan membahas salah satu
pertanyaan dari rekan kita: ALE-ALE di halaman Tutorial Belajar JavaScript: Pengertian Core
JavaScript dan DOM (Document Object Model).
Berikut adalah pertanyaannya:
Saya sedang mengerjakan project delphi menggunakan javascript ..
dimana di situ juga saya membuat browser sederhana dengan implementasi javascript di dalam
Yang mau saya tanyakan bagaimana caranya mengambil nilai yg ada di HTML / halaman browser
tampilkan di GUI program.
Contoh nya misal di halaman web terdapat kata nilai anda adalah = 80,
bagaimana mengambil string 80 tersebut dengan javascript ?!
makasih sebelumnya
Karena saya sudah lama tidak membuat program dengan delphi, kali ini saya hanya fokus
kepadacara mengambil dan menampilkan nilai yang ada di HTML dengan menggunakan
JavaScript.
Berikut adalah tampilan akhir kode program:
Dan berikut adalah kode HTML+JavaScript yang saya gunakan untuk menampilkan hasil diatas:
1 <!DOCTYPE html>
<html>
2 <head>
3 <meta charset="UTF-8">
4 <title>Tutorial Belajar JavaScript</title>
5 </head>
6
7 <body>
<h3>Contoh 1: Mengambil nilai tag span</h3>
8 <p>Nama: Andika Siswoyo, Nilai: <span id="nilai_andika">80</span>
9 <br />Nama: Joko Susilo, Nilai: <span id="nilai_joko">92</span></p>
10 <button id="tombol_p">Tampilkan Nilai</button>
11
12 <br/>
<br/>
13
14 <h3>Contoh 2: Mengambil nilai tag input</h3>
15 <form onsubmit="return false">
16 <label>Rika Pratiwi: </label>
17 <input type="text" id="input_form" value="90"/>
18 <button id="tombol_form">Tampilkan Nilai</button>
</form>
19
20 <br/>
21 <br/>
22
23 <h2>Hasil: <span id="hasil"></span></h2>
24 </body>
25
<script>
26 document.getElementById("tombol_p").
27 addEventListener("click", tampilkan_nilai_p);
28
29 document.getElementById("tombol_form").
30 addEventListener("click", tampilkan_nilai_form);
31
function tampilkan_nilai_p() {
32 var nilai_andika=document.getElementById("nilai_andika").innerHTML;
33 var nilai_joko=document.getElementById("nilai_joko").innerHTML;
34 document.getElementById("hasil").innerHTML=
35 nilai_andika+" dan "+nilai_joko;
36 }
37
function tampilkan_nilai_form(){
38 var nilai_form=document.getElementById("input_form").value;
39 document.getElementById("hasil").innerHTML=nilai_form;
40 }
41 </script>
</html>
42
43
44
45
46
47
48
49
Anda bisa mencobanya dari tampilan CODEPEN dibawah ini:
Mari kita bahas kode HTML dan JavaScript diatas dengan lebih detail.
Kode HTML
Dari contoh diatas, saya menggunakan kode HTML sebagai berikut:
1 <body>
2 <h3>Contoh 1: Mengambil nilai tag span</h3>
<p>Nama: Andika Siswoyo, Nilai: <span id="nilai_andika">80</span>
3 <br />Nama: Joko Susilo, Nilai: <span id="nilai_joko">92</span></p>
4 <button id="tombol_p">Tampilkan Nilai</button>
5
6 <br/>
7 <br/>
8
9 <h3>Contoh 2: Mengambil nilai tag input</h3>
<form onsubmit="return false">
10 <label>Rika Pratiwi: </label>
12 <button id="tombol_form">Tampilkan Nilai</button>
13 </form>
14
<br/>
15 <br/>
16
17 <h2>Hasil: <span id="hasil"></span></h2>
18 </body>
19
20
21
Dalam kode HTML diatas, saya membuat 2 buah contoh. Yang pertama adalah sebuah paragraf
yang berisi nama dan nilai dari 2 orang siswa: Andika Siswoyo dan Joko Susilo (bukan nama
sebenarnya :) ), kedua nama ini berada di dalam tag paragraf. Namun yang paling penting, nilai
dari masing-masing siswa berada di dalam tag <span> dengan
atribut id=nilai_andika danid=nilai_joko. Atribut id inilah yang akan kita gunakan untuk
mengambilnya dengan JavaScript.
Di bawah nilai siswa ini saya menambahkan sebuah tombol dengan tag <button
id=tombol_p>. Tombol ini akan digunakan sebagai trigger untuk pengambilan nilai.
Untuk contoh kedua, saya membuat sebuah form yang berisi tag <input type=text>. Inputan
ini bisa diganti-ganti nilainya pada saat halaman HTML telah tampil, dan kita akan mencoba
mengambil nilai dari tag input ini.
Sama seperti contoh diatasnya, saya menggunakan tombol <button
id=tombol_form> sebagai trigger JavaScript, yakni ketika tombol ini di-klik, ambil nilai
form dengan JavaScript.
Jika anda perhatikan, tag <form> memiliki atribut onsubmit=return false. Atribut ini adalah
kode JavaScript yang berfungsi untuk menghentikan fitur standar form yang ketika tombol
submit ditekan, form akan pindah ke halaman tertentu untuk di proses (biasanya diproses
menggunakan PHP).
Dengan kata lain, menambahkan atribut onsubmit=return false pada tag form, akan
mematikan fungsi submit. Hal ini saya lakukan karena kita akan menampilkan hasil form dengan
JavaScript, bukan dengan PHP seperti biasanya, sehingga saya tidak butuh fungsi bawaan
tersebut.
Dibagian akhir kode HTML, saya menambahkan sebuah tag span: <span id=hasil>, disinilah
nantinya nilai akhir akan ditampilkan.
Kode JavaScript
Untuk kode JavaScript, saya menempatkannya di bawah tag <body>, bukan di bagian <head>:
1
2 <script>
3 document.getElementById("tombol_p").
4 addEventListener("click", tampilkan_nilai_p);
5
addEventListener("click", tampilkan_nilai_form);
7
8 function tampilkan_nilai_p() {
9 var nilai_andika=document.getElementById("nilai_andika").innerHTML;
10 var nilai_joko=document.getElementById("nilai_joko").innerHTML;
11 document.getElementById("hasil").innerHTML=
12 nilai_andika+" dan "+nilai_joko;
}
13
14 function tampilkan_nilai_form(){
16 document.getElementById("hasil").innerHTML=nilai_form;
17 }
</script>
18
19
Kenapa harus meletakkannya kode diatas setelah tag <body>, dan bukan di <head>? Hal ini saya
lakukan karena kita akan menggunakan method khusus di dalam javascript,
yakniaddEventListener.
addEventListener adalah method (penyebutan untuk function di dalam pemrograman objek)
yang digunakan untuk menempelkan event kepada tag HTML.
Jika biasanya kita menggunakan event JavaScript: onClick langsung pada HTML,
seperti: <button onclick=tampilkan()>, maka kita bisa menggantinya
dengan addEventListener(click, tampilkan). Dengan menggunakan addEventListener, kode
HTML bisa bebas dari JavaScript.
Akan tetapi mentod addEventListener harus ditulis setelah kode HTML selesai dikirim ke web
browser. Oleh karena itu, kita harus menempatkannya setelah kode HTML.
Dalam kode Javascript diatas, saya menggunakan 2 buah method addEventListener, untuk
masing-masing tombol. Untuk mencari tombol ini di HTML, saya menggunakan method
JavaScriptL getElementById(). Dengan demikian, kode:
document.getElementById("tombol_p").
addEventListener("click", tampilkan_nilai_p);
Berarti: cari sebuah tag HTML yang ber-id=tombol_p, lalu apabila di klik, jalankan
fungsitampilkan_nilai_p.
Selanjutnya, saya membuat fungsi tampilkan_nilai_p dibawahnya.
Pada dasarnya, fungsi tampilkan_nilai_p berguna untuk mengambil nilai dari tag <span>
dengan id=nilai_andika dan id=nilai_joko, kemudian menggabungkan keduanya, dan
tampilkan hasilnya ke tag <span id=hasil>.
Kode program JavaScript:
var nilai_andika=document.getElementById("nilai_andika").innerHTML;
Berarti: Ambil isi tag HTML dengan id=nilai_andika, kemudian simpan kedalam
variabelnilai_andika. innerHTML adalah property objek JavaScript yang menampung isi
HTML. Karena di kode HTML saya membuat <span id=nilai_andika>80</span>,
makadocument.getElementById(nilai_andika).innerHTML akan menghasilkan nilai:80.
Selanjutnya saya juga melakukan hal yang sama dengan nilai_joko, dan hasilnya ditampilkan
kedalam tag <span id=hasil></span> dengan kode program:
document.getElementById("hasil").innerHTML=nilai_andika+" dan "+nilai_joko;
Untuk contoh kedua yang menggunakan form, saya juga menggunakan cara yang hampir sama,
tetapi karena nilai dari tag <input> disimpan di dalam property value, maka cara mengaksesnya
adalah dengan kode berikut:
Kemudian hasilnya saya tampilkan di dalam tag <span id=hasil></span>.
* 22 February 2015: Update untuk pertanyaan dari rekan kingzen, yakni bagaimana jika hasil
form ditampilkan dalam halaman lain?
Menggunakan form dengan JavaScript membuka ide untuk hal-hal yang tidak bisa dilakukan
dengan HTML saja, salah satunya saya akan mencoba menampilkan hasil form dalam halaman
lain.
Salah satu keterbatasan untuk hal ini adalah kita tidak bisa mengutak-atik isi dari halaman lain
dengan JavaScript. Sebagai contoh, saya menjalankan web browser dan membuka 2 tab. Pada tab
pertama saya membuka situs duniailkom, sedangkan pada tag kedua saya membuka
situs facebook. Dalam kasus ini, kode Javascript pada situs duniailkom tidak bisa menyentuh
isi situs facebook. Ini adalah salah satu fitur keamanan di dalam JavaScript yang dikenal
dengan Same-origin policy.
Agar JavaScript bisa memanipulasi halaman lain, maka halaman tersebut harus berada dalam
satu domain, atau dibuka dari halaman saat ini dengan menggunakan Window object.
Pembahasan mengenai Window object javascript akan membutuhkan tutorial tersendiri, karena
objek ini memiliki banyak method dan property yang bisa digunakan.
Dalam contoh kali ini saya hanya menggunakan method window.open untuk membuka halaman
baru. Langsung saja masuk kedalam contoh program, berikut adalah kode yang digunakan:
<!DOCTYPE html>
1 <html>
2 <head>
3 <meta charset="UTF-8">
4 <title>Tutorial Belajar JavaScript</title>
5 </head>
6
<h3>Contoh 3: Mengambil nilai tag input,
7 tampilkan nilai pada jendela baru</h3>
8
9 <button id="tombol_jendela">Buat Jendela Baru</button>
10
11 <br/>
12 <br/>
13
14 <form onsubmit="return false">
<label>Rika Pratiwi: </label>
16 <button id="tombol_form">
17 Tampilkan Nilai pada jendela baru
18 </button>
</form>
19
20 <script>
21
22 document.getElementById("tombol_jendela").
23 addEventListener("click", jendela_baru);
24
addEventListener("click", tampilkan_nilai_form);
26
27 function tampilkan_nilai_form(){
29 newWindow.document.getElementById("hasil").innerHTML=nilai_form;
30 }
31
32 function jendela_baru(){
newWindow = window.open("", "Jendela Baru", "width=400, height=200");
33 newWindow.document.write("<h2>Hasil: <span id='hasil'></span></h2>");
34
35 // newWindow akan menjadi global variabel,
36 // sehingga bisa diakses dari fungsi tampilkan_nilai_form
37 }
38
</script>
39 </body>
40 </html>
41
42
43
44
45
46
47
Dalam kode diatas, tombol Buat Jendela Baru digunakan untuk membuat jendela baru dengan
method window.open(). Pada jendela baru tersebut saya juga menyisipkan sebuah
tag <span>dengan id=hasil. Referensi ke jendela baru ini disimpan ke dalam
variabel newWindow. Variabel inilah yang menjadi jembatan antara halaman lama dengan
halaman baru.
Ketika tombol Tampilkan Nilai pada jendela baru ditekan, maka kita bisa mengakses
tag <span> ini dan menulis hasilnya menggunakan perintah:
1 newWindow.document.getElementById("hasil").innerHTML=nilai_form;
Berikut contoh kode jika anda ingin mencoba script diatas:
Demikian tutorial kita tentang Cara Mengambil Nilai HTML dengan JavaScript, jika anda baru
pertama kali mengenal JavaScript, penjelasan diatas mungkin cukup njelimet. Duniailkom juga
telah membuat Tutorial Belajar JavaScript Dasar untuk pemula bagi anda yang ingin mendalami
JavaScript.
Tutorial Terkait:
Related
Tutorial Belajar JavaScript Part 3: Cara Menjalankan Kode Program JavaScript03 May 14In "Tutorial
JavaScript"
Tutorial Belajar JavaScript Part 5: Cara Memasukkan (input) kode JavaScript ke dalam HTML09 May 14In
"Tutorial JavaScript"
Tutorial Belajar JavaScript Dasar Untuk Pemula16 Mar 14In "Tutorial JavaScript"
Tags: Belajar JavaScript, cara menampilkan JavaScript, tutorial belajar javascript
32 COMMENTS
1.
ALE ALE
01 Dec 14
makasih banyak mas tutorialnya sangat membantu .. sudah cukup jelas bagi saya yg baru belajar
javascript tutorialnya .. sangat jelas malah dengan penjelasannya :D
sekali lagi makasih banyak .. saya sangat terbantu dengan article nya (Y)
Reply

Andre
02 Dec 14
Syukurlah tutorialnya bisa membantu mas,.. sengaja saya buatkan artikelnya biar
teman-teman yang lain bisa mempelajari juga sukses juga dengan proyeknya :)
Reply
2.
ALE ALE
06 Dec 14
ternyata saya masih ada kendala dikit mas untuk tutornya dah ngerti ane .. cuma buat
nampilin ke GUI delphi 7 dari hasil yang d dapat oleh JSnya masih bingung membentuk variable
yg pas nya .. hehehe ..
soalnya di component chromium ini gak ada procedure untuk getelementbyid dan sebangsanya
seperti twebbrowser bawaan default delphi ,, jd smua harus execute pake javascript,, tinggal cara
menampilkan hasil dari javascript itu ke dalam form GUI aj sih yg bingung ,, selainya sih berkat
tutor dr mas udah lancar :D

Cara Mengambil Nilai HTML Dengan JavaScript

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cara Mengambil Nilai HTML Dengan JavaScript

Diunggah oleh

Hak Cipta:

Format Tersedia

Cara Mengambil Nilai HTML dengan

Kemudian hasilnya saya tampilkan di dalam tag <span id=hasil></span>.

Berikut contoh kode jika anda ingin mencoba script diatas:

Tags: Belajar JavaScript, cara menampilkan JavaScript, tutorial belajar javascript

Anda mungkin juga menyukai