Javascriptでトグルスイッチを作る

html

2023.02.02

はじめに
トグルスイッチを作成する
動作確認
まとめ

はじめに

Javascriptでトグルスイッチを作成します。

トグルスイッチを作成する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>とぐるすいっち</title>
</head>
<body>
  <input type="submit" value="ON">
  <script>
    var btn = document.querySelector("input[type=submit]");
    btn.addEventListener("click", function(e){
      if (btn.value == "ON") {
        this.value="OFF"
      } else {
        this.value="ON"
      }
    }) 
  </script>
</body>
</html>

動作確認

まとめ

Javascriptでトグルスイッチを作成しました。