Teknologi Riau – Hai sobat semua apakabarnya, mudah – mudahan dalam keadaan yang baik, kali ini saya akan berbagi bagaimana caranya menggunakan fungsi Visible dan Invisible.
Contents
Kenapa menggunakan visible dan invisible ?
fungsi ini biasanya di gunakan bila suatu komponen memiliki fungsi yang mana jika satu komponen di tekan akan menampilkan komponen lain atau menyembunyikan komponen lain, fungsi ini dapat digunakan di bahasa pemrograman selain html.
Apa itu visible ?
visible merupakan fungsi yang berguna untuk menampilkan suatu komponen, jadi jika sebuah komponen <div> ingin di tampilkan maka dapat menggunakan fungsi ini.
Apa itu invisible ?
Merupakan fungsi yang digunakan untuk menyembunyikan komponen, jadi jika sebuah komponen <div> ingin di sembunyikan maka dapat menggunakan fungsi ini.
Bagaimana caranya ?
caranya tinggal buka aplikasi editor saudara dan ketikan kode javascript di bawah ini
<script type=”text/javascript”>
function yesnoCheck() {
if (document.getElementById(‘yesCheck‘).checked) {
document.getElementById(‘ifYes‘).style.display = ‘block’;
} else document.getElementById(‘ifYes‘).style.display = ‘none’;}
</script>
dan berikut komponen dan script html yang digunakan untuk membuat fungsi ini
<div class=”form-group”>
<label>No Hp</label><br>
<input type=”radio” onclick=”javascript:yesnoCheck();” name=”hp” id=”yesCheck“> Punya
<input type=”radio” onclick=”javascript:yesnoCheck();” name=”hp” id=”noCheck“> Tidak Punya<br>
</div><div class=”form-group” id=”ifYes” style=”display:none”>
<input type=”text” name=”hp” class=”form-control”>
</div>
Penjelasan
yesnoCheck() merupakan nama fungsi yang digunakan
yesCheck merupakan id komponen yang digunakan untuk menampilkan komponennya
noCheck merupakan id komponen yang digunakan untuk menyembunyikan komponennya
ifYes merupakan komponen yang di jadikan object yang akan di tampilkan dan di sembunyikan
Full script
<!DOCTYPE html>
<html>
<head>
<title>Teknologi Riau</title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css” integrity=”sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk” crossorigin=”anonymous”>
<script type=”text/javascript”>
function yesnoCheck() {
if (document.getElementById(‘yesCheck’).checked) {
document.getElementById(‘ifYes’).style.display = ‘block’;
} else document.getElementById(‘ifYes’).style.display = ‘none’;}
</script>
</head>
<body>
<div class=”container”>
<div class=”form-group”>
<center><h2>Biodata</h2></center>
</div>
<div class=”form-group”>
<label>Nama</label>
<input type=”text” name=”nama” class=”form-control”>
</div>
<div class=”form-group”>
<label>No Hp</label><br>
<input type=”radio” onclick=”javascript:yesnoCheck();” name=”yesno” id=”yesCheck”> Punya
<input type=”radio” onclick=”javascript:yesnoCheck();” name=”yesno” id=”noCheck”> Tidak Punya<br>
</div>
<div class=”form-group” id=”ifYes” style=”display:none”>
<input type=”text” name=”hp” class=”form-control”>
</div>
<div class=”form-group”>
<label>Alamat</label>
<textarea class=”form-control” name=”alamat”></textarea>
</div>
<div class=”form-group”>
<button class=”btn btn-primary”> Simpan</button>
</div></div>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js” integrity=”sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js” integrity=”sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI” crossorigin=”anonymous”></script>
</body>
Cukup mudah bukan untuk membuat fungsi visible dan invisible di html, selamat mencoba ya.
