Cara Mengambil Nilai HTML dengan JavaScript

Posted on

Pada artikel tanya-jawab pemrograman duniailkom kali ini, saya akan membahas diantara pertanyaan dari rekan kita: ALE-ALE di halaman Tutorial Belajar JavaScript: Pengertian Core JavaScript dan DOM (Document Object Model).

Berikut ialah pertanyaannya:


Karena saya telah lama tak merancang program dengan delphi, kali ini saya hanya fokus kepada cara mengambil dan menampilkan nilai yang terdapat di HTML dengan menggunakan JavaScript.

Berikut ialah tampilan ahir kode program:

Dan berikut ialah kode HTML+JavaScript yang saya gunakan bagi menampilkan hasil diatas:

Sahabat dapat 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 selaku berikut:

Pada kode HTML diatas, saya merancang 2 buah contoh. Yang pertama-tama ialah sebuah paragraf yang berisi nama dan nilai dari 2 orang pelajar: Andika Siswoyo dan Joko Susilo (bukan nama sebetulnya 🙂 ), kedua nama ini berada di pada tag paragraf. Namun yang sangat urgen, nilai dari masing-masing pelajar berada di pada tag <span> dengan atribut id=nilai_andika dan id=nilai_joko. Atribut id inilah yang akan kita gunakan bagi mengambilnya dengan JavaScript.

Di bawah nilai pelajar ini saya menambahkan sebuah tombol dengan tag <button id=”tombol_p”>. Tombol ini akan digunakan selaku ‘trigger’ bagi pengambilan nilai.

Bagi contoh kedua, saya merancang sebuah form yang berisi tag <input type=”text”>. Inputan ini dapat diganti-ganti nilainya di dikala 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”> selaku ‘trigger’ JavaScript, yakni ketika tombol ini di-klik, ambil nilai form dengan JavaScript.

Kalau kamu perhatikan, tag <form> mempunyai atribut onsubmit=”return false”. Atribut ini ialah kode JavaScript yang berfungsi bagi menghentikan fitur standar form yang ketika tombol submit ditekan, form akan pindah ke halaman tertentu bagi di proses (biasanya diproses menggunakan PHP).

Dengan kata lain, menambahkan atribut onsubmit=”return false” di tag form, akan mematikan manfaat submit. Hal ini saya lakukan karena kita akan menampilkan hasil form dengan JavaScript, bukan dengan PHP seperti biasanya, sehingga saya tak butuh manfaat bawaan tersebut.

Dibagian ahir kode HTML, saya menambahkan sebuah tag span: <span id=”hasil”>, disinilah
nantinya nilai ahir akan ditampilkan.


Kode JavaScript

Bagi kode JavaScript, saya menempatkannya di bawah tag <body>, bukan di bagian <head>:

Kenapa mesti meletakkannya kode diatas setelah tag <body>, dan bukan di <head>? Hal ini saya lakukan karena kita akan menggunakan method khusus di pada javascript, yakni addEventListener.

addEventListener ialah method (penyebutan bagi function di pada pemrograman objek) yang digunakan bagi ‘menempelkan’ event kepada tag HTML.

Kalau biasanya kita menggunakan event JavaScript: onClick seketika di HTML, seperti: <button onclick=”tampilkan()”>, karenanya kita dapat menggantinya dengan addEventListener(“click”, tampilkan). Dengan menggunakan addEventListener, kode HTML dapat bebas dari JavaScript.

Akan tetapi mentod addEventListener mesti ditulis setelah kode HTML selesai dikirim ke web browser. Oleh karena itu, kita mesti menempatkannya setelah kode HTML.

Pada kode Javascript diatas, saya menggunakan 2 buah method addEventListener, bagi masing-masing tombol. Bagi mencari tombol ini di HTML, saya menggunakan method JavaScriptL getElementById(). Dengan demikian, kode:

Berarti: cari sebuah tag HTML yang ber-id=”tombol_p”, lalu apabila di klik, jalankan manfaat tampilkan_nilai_p.

Berikutnya, saya merancang manfaat tampilkan_nilai_p dibawahnya.

Di dasarnya, manfaat tampilkan_nilai_p bermanfaat bagi 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:

Berarti: Ambil isi tag HTML dengan id=”nilai_andika”, kemudian simpan kedalam variabel nilai_andika. innerHTML ialah property objek JavaScript yang menampung ‘isi’ HTML. Karena di kode HTML saya merancang <span id=”nilai_andika”>80</span>, karenanya document.getElementById(“nilai_andika”).innerHTML akan menghasilkan nilai:80.

Berikutnya saya pun menjalankan hal yang sama dengan nilai_joko, dan hasilnya ditampilkan kedalam tag <span id=”hasil”></span> dengan kode program:

Bagi contoh kedua yang menggunakan form, saya pun menggunakan cara yang hampir sama, tetapi karena nilai dari tag <input> disimpan di pada property value, karenanya cara mengaksesnya ialah dengan kode berikut:

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


* 22 February 2015: Update bagi pertanyaan dari rekan kingzen, yakni bagaimana kalau hasil form ditampilkan pada halaman lain?

Menggunakan form dengan JavaScript membuka ide bagi hal-hal yang tak dapat dilakukan dengan HTML saja, salah satunya saya akan mencoba menampilkan hasil form pada halaman lain.

Diantara keterbatasan bagi hal ini ialah kita tak dapat ‘mengutak-atik’ isi dari halaman lain dengan JavaScript. Selaku contoh, saya menjalankan web browser dan membuka 2 tab. Di tab pertama-tama saya membuka situs duniailkom, sedangkan di tag kedua saya membuka situs facebook. Pada kasus ini, kode Javascript di situs duniailkom tak dapat ‘menyentuh’ isi situs facebook. Ini ialah diantara fitur keamanan di pada JavaScript yang dikenal dengan Same-origin policy.

Agar JavaScript dapat memanipulasi halaman lain, karenanya halaman tersebut mesti berada pada satu domain, atau dibuka dari halaman dikala ini dengan menggunakan Window object. Pembahasan mengenai Window object javascript akan membutuhkan panduan tersendiri, karena objek ini mempunyai banyak method dan property yang dapat digunakan.

Pada contoh kali ini saya hanya menggunakan method window.open bagi membuka halaman baru. Seketika saja masuk kedalam contoh program, berikut ialah kode yang digunakan:

 Pada kode diatas, tombol ‘Bikin Jendela Baru’ digunakan bagi merancang jendela baru dengan method window.open(). Di jendela baru tersebut saya pun menyisipkan sebuah tag <span> dengan id=’hasil’. Referensi ke jendela baru ini disimpan ke pada variabel newWindow. Variabel inilah yang menjadi ‘jembatan’ antara halaman lama dengan halaman baru.

Ketika tombol ‘Tampilkan Nilai di jendela baru’ ditekan, karenanya kita dapat mengakses tag <span> ini dan menulis hasilnya menggunakan petunjuk:

Berikut contoh kode kalau kamu ingin mencoba script diatas:

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

Demikian panduan kita mengenai Cara Mengambil Nilai HTML dengan JavaScript, kalau kamu baru pertama-tama kali mengenal JavaScript, penjelasan diatas mungkin lumayan ‘njelimet’. Duniailkom pun telah merancang Tutorial Belajar JavaScript Dasar bagi pemula untuk kamu yang ingin mendalami JavaScript.


eBook JavaScript Uncover Duniailkom

JavaScript telah menjadi fitur wajib di setiap laman modern. Duniailkom telah menyusun eBook JavaScript Uncover yang membahas JavaScript dengan lebih detail dan lebih komplit, mulai dari basic hingga konsep DOM, Event dan AJAX. Penjelasan lebih lanjut dapat ke eBook JavaScript Uncover Duniailkom.


Sumber https://www.duniailkom.com/