Cara Mengambil Nilai HTML dengan JavaScript

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 dalamnya.

Yang mau saya tanyakan bagaimana caranya mengambil nilai yg ada di HTML / halaman browser sehingga dgn menggunakan javascript tersebut akan saya 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 kepada cara mengambil dan menampilkan nilai yang ada di HTML dengan menggunakan JavaScript.

Berikut adalah tampilan akhir kode program:

Cara Mengambil Nilai HTML dengan JavaScript

Dan berikut adalah kode HTML+JavaScript yang saya gunakan untuk menampilkan hasil diatas:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
</head>

<body>
<h3>Contoh 1: Mengambil nilai tag span</h3>
  <p>Nama: Andika Siswoyo, Nilai: <span id="nilai_andika">80</span>
  <br />Nama: Joko Susilo, Nilai: <span id="nilai_joko">92</span></p>
<button id="tombol_p">Tampilkan Nilai</button>

<br/>
<br/>

<h3>Contoh 2: Mengambil nilai tag input</h3>
<form onsubmit="return false">
  <label>Rika Pratiwi: </label>
  <input type="text" id="input_form" value="90"/>
  <button id="tombol_form">Tampilkan Nilai</button>
</form>

<br/>
<br/>

<h2>Hasil: <span id="hasil"></span></h2>
</body>

<script>
document.getElementById("tombol_p").
addEventListener("click", tampilkan_nilai_p);

document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);

function tampilkan_nilai_p() {
    var nilai_andika=document.getElementById("nilai_andika").innerHTML;
    var nilai_joko=document.getElementById("nilai_joko").innerHTML;
    document.getElementById("hasil").innerHTML=
    nilai_andika+" dan "+nilai_joko;
}

function tampilkan_nilai_form(){
    var nilai_form=document.getElementById("input_form").value;
    document.getElementById("hasil").innerHTML=nilai_form;
}
</script>
</html>

Anda bisa mencobanya dari tampilan CODEPEN dibawah ini:

See the Pen pvjbJL by duniailkom (@duniailkom) on CodePen.10206

Mari kita bahas kode HTML dan JavaScript diatas dengan lebih detail.


Kode HTML

Dari contoh diatas, saya menggunakan kode HTML sebagai berikut:

<body>
<h3>Contoh 1: Mengambil nilai tag span</h3>
<p>Nama: Andika Siswoyo, Nilai: <span id="nilai_andika">80</span>
<br />Nama: Joko Susilo, Nilai: <span id="nilai_joko">92</span></p>
<button id="tombol_p">Tampilkan Nilai</button>

<br/>
<br/>

<h3>Contoh 2: Mengambil nilai tag input</h3>
<form onsubmit="return false">
  <label>Rika Pratiwi: </label>
  <input type="text" id="input_form" value="90"/>
<button id="tombol_form">Tampilkan Nilai</button>
</form>

<br/>
<br/>

<h2>Hasil: <span id="hasil"></span></h2>
</body>

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 dan id=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>:

<script>
document.getElementById("tombol_p").
addEventListener("click", tampilkan_nilai_p);

document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);

function tampilkan_nilai_p() {
    var nilai_andika=document.getElementById("nilai_andika").innerHTML;
    var nilai_joko=document.getElementById("nilai_joko").innerHTML;
    document.getElementById("hasil").innerHTML=
    nilai_andika+" dan "+nilai_joko;
}

function tampilkan_nilai_form(){
    var nilai_form=document.getElementById("input_form").value;
    document.getElementById("hasil").innerHTML=nilai_form;
}
</script>

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, yakni addEventListener.

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 fungsi tampilkan_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 variabel nilai_andika. innerHTML adalah property objek JavaScript yang menampung ‘isi’ HTML. Karena di kode HTML saya membuat <span id=”nilai_andika”>80</span>, maka document.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:

var nilai_form=document.getElementById("input_form").value;

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>
<html>
<head>
<meta charset="UTF-8">
<title>Tutorial Belajar JavaScript</title>
</head>
 
<h3>Contoh 3: Mengambil nilai tag input, 
tampilkan nilai pada jendela baru</h3>

<button id="tombol_jendela">Buat Jendela Baru</button>

<br/>
<br/>

<form onsubmit="return false">
  <label>Rika Pratiwi: </label>
  <input type="text" id="input_form" value="90"/>
  <button id="tombol_form">
     Tampilkan Nilai pada jendela baru
   </button>
</form>
 
<script>

document.getElementById("tombol_jendela").
addEventListener("click", jendela_baru);
 
document.getElementById("tombol_form").
addEventListener("click", tampilkan_nilai_form);
 
function tampilkan_nilai_form(){
    var nilai_form=document.getElementById("input_form").value;
    newWindow.document.getElementById("hasil").innerHTML=nilai_form;
}

function jendela_baru(){
newWindow = window.open("", "Jendela Baru", "width=400, height=200");
newWindow.document.write("<h2>Hasil: <span id='hasil'></span></h2>");

// newWindow akan menjadi global variabel, 
// sehingga bisa diakses dari fungsi tampilkan_nilai_form
}

</script>
</body>
</html>

Tampilan hasil form pada jendela baru - JavaScriptDalam 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:

newWindow.document.getElementById("hasil").innerHTML=nilai_form;

Berikut contoh kode jika anda ingin mencoba script diatas:

See the Pen ZYoQYp by duniailkom (@duniailkom) on CodePen.10206

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.


eBook JavaScript Uncover Duniailkom
JavaScript sudah menjadi fitur wajib di setiap website modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih lengkap, mulai dari dasar hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut bisa ke eBook JavaScript Uncover Duniailkom.

Tutorial Terkait:

46 Comments

  1. ALE ALE
    01 Dec 14
    • Andre
      02 Dec 14
  2. ALE ALE
    06 Dec 14
    • Andre
      06 Dec 14
  3. ALE ALE
    06 Dec 14
  4. kingzen
    21 Feb 15
    • Andre
      22 Feb 15
      • kingzen
        22 Feb 15
        • Andre
          22 Feb 15
        • kingzen
          22 Feb 15
  5. kingzen
    22 Feb 15
    • Andre
      23 Feb 15
      • kingzen
        24 Feb 15
        • Andre
          26 Feb 15
  6. test
    17 Oct 15
    • Uknown
      18 Dec 15
      • Edo
        02 Mar 16
  7. Edo
    02 Mar 16
    • Dewa Coding
      28 Jul 16
  8. Antonio
    18 May 16
    • Andre
      18 May 16
  9. asalreview
    18 May 16
  10. paidi
    20 May 16
    • Andre
      20 May 16
      • mazid al bana
        04 Aug 16
  11. Abi
    13 Aug 16
    • Andre
      14 Aug 16
  12. Taufik
    12 Oct 16
    • Andre
      12 Oct 16
  13. Mychar1st
    14 Nov 16
    • Andre
      15 Nov 16
  14. iand brebet
    05 Dec 16
  15. Ali
    20 Mar 17
    • Andre
      20 Mar 17
  16. immanuel
    05 May 17
    • Andre
      05 May 17
  17. ahmad ridwan
    30 Jun 17
    • Andre
      30 Jun 17
  18. Andi Ikbal
    23 Jul 17
    • Andre
      24 Jul 17
  19. wendi
    01 Sep 17
    • Andre
      03 Sep 17
      • wendi
        04 Sep 17
    • Andre
      11 Oct 17

Add Comment