Membuat Tombol hitung Sederhana dengan Javascript
Javascript adalah bahasa pemrogramman yang powerfulll, dan dapat di gunakan bagi banyak program bagus blog, desktop, maupun robot. pun bahasa skrip yang populer di internet dan dapat bekerja di sebahagian besar penjelajah web populer seperti Internet Explorer (IE), Mozilla Firefox, Netscape dan Opera. Kode JavaScript dapat disisipkan pada halaman web menggunakan tag SCRIPT. Nah Kali ini kita akan belajar Merancang Tombol hitung Sederhana dengan Javascript yuk kita praktekan.
Siap kan file index.html dan struktur HTML nya seperti berikut. jangan lupa di simpan yah.
<!DOCTYPE html>
<html lang =en>
<head>
<meta charset= UTF-8>
<title> Tombol Hitung Sederhana </title>
<link rel=stylesheet href=https://bootswatch.com/4/cosmo/bootstrap.min.css>
</head>
<body>
<div class =m-5>
<button class= btn btn-primary id= tambah> Tambah </button>
<button class= btn btn-success id= kurang> Kurangi </button>
<div class=m-4>
Hasil : <span class= bg-success text-white font-weight-bold p-2 id= hasil> 0</span>
</div>
</div>
</body>
</html>
tampilan program kita seperti di atas.
lalu kita bikin kegunaan javascriptnya seperti di bawah ini.
<script>
var tambah = document.getElementById(‘tambah’);
var kurang = document.getElementById(‘kurang’);
var hasil = document.getElementById(‘hasil’);
var no = 1;
tambah.onclick = function(){
hasil.innerHTML = no++;
}
kurang.onclick = function(){
hasil.innerHTML = no–;
}
</script>
penjelasannya yaitu kita tampung ID tambah, kurang dan hasil ke pada masing masing variabel. lalu tentukan angka pertama-tama yang akan di hitung dengan membangun variabel no = satu.
lalu var tambah kita berikan event onclick yang fungsinya tersebut yaitu menambahkan variabel no, yang hasilnya di keluarkan oleh variabel hasil, begitupun bagi varibael kurang yang kita beri event onclick yang kegunaan nya sendiri mengurangi var no satu kali. dan di keluarkan olah variabel hasil. seperti itu penjelannya, kita lihat hasilnya teman teman.
bila kalian klik tombol tambah karenanya nilai akan bertambah satu dan seterusnya bila trus di klik
dan bila di klik tombol kurang karenanya nilai akan berkurang satu dan seterusnya bila trus di klik
lumayan mudahkan teman teman bagi penyusunan Tombol hitung Sederhana dengan Javascript, demikianlah panduan Merancang Tombol hitung Sederhana dengan Javascript semoga bermanfaat yah teman teman 😀
Sumber https://kursuswebsite.org
