JAVASCRIPT 

Contoh Program Javascript Sederhana Event Click Part 3


Dalam artikel ini saya akan melanjutkan membuat program javascript sederhana lanjutan dari part 2. program yang saya buat ketika tombol di klik akan muncul sebuah pesan tertentu. tentu ini ada kaitannya dengan DOM event click dengan sesuai judul artikel dan kehebatan pada javascript. program yang saya buat ini sangat sederhana dan saya akan buatkan algoritma nya seperti biasa agar bisa tahu bagaimana program itu bekerja.


Kamu buat file HTML dengan nama index.html

<!doctype html>
   <html lang="en">
  <head>
    <title>Event Click Javascript Part 3</title>
  </head>   
    
  <body>         
     <br>
     <br>
     <br>
<!--      Buat h2-->
<!--      Jadikan style display none agar bisa menghilangkan dulu h2 nya-->
      <center><h2 style="display: none;">Halo saya javascript :D</h2></center>
      <center><h2 style="display: none;">Salam kenal calon programmer :D</h2></center>
      
      <!--       Buat tombol-->
     <center><button type="button">Tekan!</button></center> 
      
      <script src="script.js"></script>
  </body>
</html>

Dan kamu buat file javascript dengan nama script.js

//buat variabel
let foo1 = document.getElementsByTagName('h2')[0];
let foo2 = document.getElementsByTagName('h2')[1];
let btn = document.getElementsByTagName('button')[0];

//ketika tombol di klik
btn.addEventListener('click', function(){
    //tampilkan Halo saya javascript :D
    foo1.style.display = 'block';
    //tampilkan Salam kenal calon programmer :D dalam 2 detik
    setTimeout(function(){
        foo2.style.display = 'block';
        //dan hilangkan Halo saya javascript :D dalam 2 detik
        foo1.style.display = 'none';
    }, 2000);
});

Program di atas kamu bisa kunjungi di sini agar bisa lihat gambarannya. semoga bermanfaat :D