getElementById Function JavaScript

getElementById() function bisa digunakan untuk mengakses value dari HTML element.

document.getElementById

Script di bawah ini berguna untuk memeriksa apakah visitor memberikan input text pada text field.

Code JavaScript:

<script type="text/javascript">
function notEmpty(){
   var myTextField = document.getElementById('myText');
   if(myTextField.value != "")
      alert("You entered: " + myTextField.value)
   else
      alert("Would you please enter some text?")
}
</script>
<input type='text' id='myText' />
<input type='button' onclick='notEmpty()' value='Form Checker' />

Hasil code JavaScript:



<input type='text' id='myText' />

Code ini artinya kita membuat text field yang diberi id [myText].

var myTextField = document.getElementById('myText');

Code ini artinya ambil input dari text field yang memiliki id [myText]. Simpan input tersebut di dalam [myTextField] variable.

if(myTextField.value != "")
  • [myTextField.value] – digunakan untuk menyatakan value dari [myTextField] variable.
  • [!=] – merupakan compare operator yang berarti tidak sama dengan.
  • [""] – artinya kosong atau tidak ada character apapun.
  • [if(myTextField.value != "")] – artinya jika value dari [myTextField] variable tidak sama dengan kosong maka jalankan code dibawah.

Resume getElementById

Ada beberapa hal yang harus diperhatikan saat menggunakan getElementById() function.

  • getElementById() function merupakan document object. Artinya kamu hanya bisa menggunakannya seperti ini: document.getElementById.
  • Selalu beri id pada element HTML yang ingin kamu gunakan. Function ini tidak akan bisa digunakan tanpa id.
  • Jika ingin mengakses text pada non-input element HTML maka jangan gunakan value property melainkan innerHTML property. Tutorial berikutnya kita akan membahas mengenai innerHTML.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>