Cara Membuat Toggle Text

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 23, 2021

Di bawah ini kita akan mempelajari cara membuat toggle teks dengan JavaScript.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<p>Klik tombol untuk menukar teks dari elemen DIV:</p>

<p><button onclick="myFunction()">Klik Di sini</button></p>

<div id="myDIV">Tergila-gila</div>

<script>
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.innerHTML === "Tergila-gila") {
    x.innerHTML = "Ini bukan yang pertama tapi ini paling menarik!";
  } else {
    x.innerHTML = "Tergila-gila";
  }
}
</script>

</body>
</html>

Membuat Toggle Teks

Langkah 1) Tambahkan HTML:
Contoh

<p><button onclick="myFunction()">Klik Di sini</button></p>

<div id="myDIV">Tergila-gila</div>

Langkah 2) Tambahkan JavaScript:
Contoh

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.innerHTML === "Tergila-gila") {
    x.innerHTML = "Ini bukan yang pertama tapi ini paling menarik!";
  } else {
    x.innerHTML = "Tergila-gila";
  }
}