Cara Mengambil Nilai HTML Dengan JavaScript

Saat ini saya akan mengulas cara mengambil dan menampilkan nilai yang terdapat di HTML dengan memakai JavaScript.

Berikut ialah tampilan akhir kode program:

Dan berikut ialah kode HTML + JavaScript yang saya pakai untuk menampilkan hasil diatas:

HTML; Snippet HTML;

<!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>

Kode HTML

Dari contoh diatas, saya memakai kode HTML sebagai berikut:

HTML; Snippet HTML;

<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 ialah sebuah paragraf yang berisi nama dan nilai dari 2 orang pelajar: Andika Siswoyo dan Joko Susilo (bukan nama sebetulnya), kedua nama ini ada di dalam tag paragraf. Tetapi yang amat penting, nilai dari masing-masing pelajar berada di dalam tag <span> dengan atribut id=nilai_andika dan id=nilai_joko. Atribut id inilah yang akan kita pakai untuk mengambilnya dengan JavaScript. Dibawah nilai pelajar ini saya menambahkan sebuah tombol dengan tag <button id=”tombol_p”>. Tombol ini akan dipakai sebagai ‘trigger’ untuk pengambilan nilai. Untuk contoh kedua, saya membuat sebuah form yang berisi tag <input type=”text”>. Inputan ini dapat diganti-ganti nilainya di saat halaman HTML sudah tampil, dan kita akan mencoba mengambil nilai dari tag input ini. Sama seperti contoh diatasnya, saya memakai tombol <button id=”tombol_form”> sebagai ‘trigger’ JavaScript, yaitu saat tombol ini di-klik, ambil nilai form dengan JavaScript. Bila Kamu perhatikan, tag <form> mempunyai atribut onsubmit=”return false”. Atribut ini merupakan kode JavaScript yang berguna untuk menghentikan fitur standar form yang saat tombol submit ditekan, form akan pindah ke halaman tertentu untuk di proses (pada umumnya diproses memakai PHP). Dengan kata lain, menambahkan atribut onsubmit=”return false” pada tag form, akan mematikan fungsi submit. Hal ini saya lakukan sebab kita akan menampilkan hasil form dengan JavaScript, bukan dengan PHP seperti pada umumnya, sehingga saya tidak butuh fungsi bawaan itu. Pada bagian akhir kode HTML, saya menambahkan sebuah tag span: <span id=”hasil”>, disinilah nantinya nilai akhir akan ditampilkan.