Tugas Pertemuan 5: Membuat Web Menambah Nilai Dengan Tombol Menggunakan jQuery
Untuk pertemuan ke-5, kita akan membuat halaman website yang mengimplementasikan jQuery.
Website: Document (poodoop.github.io)
Link Repository: Poodoop/PWEB-JQUERY (github.com)
Sebelum bisa menggunakan jQuery, pertama harus didambah terlebih dahulu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.min.css">
<script src="bootstrap.min.js"></script>
<script src="jquery-3.6.1.js"></script>
Kemudian, dengan jQuery, bisa menambah fitur tombol yang akan menambah dan menampilkan nilai di h1.
<!-- Buat h1 untuk menampilkan nilai ketika tombol tekan di klik-->
<center><h1></h1></center>
<!-- Buat tombol-->
<center><button type="button" class="btn btn-primary">Tekan!</button></center>
//Ketika dokumen HTML sudah siap di reload
$(document).ready(function() {
//buat nilai 1
var nilai = 1;
//ketika tombol tekan di klik
$(".btn").on("click", function(){
//tambah nilai dan tampilkan pada h1
$("h1").html(nilai++);
});
});
Komentar
Posting Komentar