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="color:green;";
button.innerHTML="Merah";
}
else if (button.innerHTML== "Merah")
{
pesan.style.cssText="color:red;";
button.innerHTML='Hijau';
}
}
</script>
</body>
</html>
Terdapat script untuk membuat button yaitu <button id="buttonWarna" onclick="gantiWarna()">Hijau</button> perintah ini 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="color:green;";
button.innerHTML="Merah";
script diatas merupakan script percabangan yang jika button bertulis hijau di klik maka warna text 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="color:red;";
button.innerHTML='Hijau';
kemudian
jika button yang ditekan bertulis merah maka text akan berubah menjadi
warna merah. Dan teks pada button akan berubah menjadi teks hijau. Output:
