langkah pertama buat sebuah file dari notepad maupun notepad ++, kemudian masukkan perintah script seperti berikut:
<html>
<head>
<title> Belajar
JavaScript</title>
</head>
<body>
<div
id="pesan"> <h1> Selamat Datang </h1></div>
<button
id="buttonWarna"
onclick="gantiWarna()">Hijau</button>
<script
type = "text/JavaScript">
function gantiWarna(){
var pesan =
document.getElementById('pesan');
var button =
document.getElementById('buttonWarna');
if (button.innerHTML==
"Hijau")
{
pesan.style.cssText="background-color:green;";
button.innerHTML="Merah";
}
else if
(button.innerHTML== "Merah")
{
pesan.style.cssText="background-color:red;";
button.innerHTML='Hijau';
}
}
</script>
</body>
</html>
Terdapat script untuk membuat button yaitu
<button id="buttonWarna"
onclick="gantiWarna()">Hijau</button> perintah ii untuk
membuat button dan memberi button tersebut dengan ama buttonWarna, dan ketika
button di klik tulisan button akan beruban menjadi gantiWarna.
Script “var pesan =
document.getElementById(‘pesan’)” berguna untuk membuat variabel pesan yang
variabel pesan ini disimpan dalam dokumen dan dapat di panggil dengan id pesan.
if
(button.innerHTML== "Hijau")
{pesan.style.cssText="background-color:green;";
button.innerHTML="Merah";
script diatas merupakan script percabangan yang jika
button bertulis hijau di klik maka background akan berubah menjadi warna hijau,
kemudian teks pada button yang sebelumnya hijau akan berubah menjadi teks
bertulis merah.
else
if (button.innerHTML== "Merah")
{
pesan.style.cssText="background-color:red;";
button.innerHTML='Hijau';
kemudian jika button
yang ditekan bertulis merah maka background akan berubah menjadi warna merah.
Dan teks pada button akan berubah menjadi teks hijau. Output:
No comments:
Post a Comment