JavaScript 按钮切换：代码完成

Question

问题是：

我们提供了一些简单的 JavaScript 模板代码。 您的目标是修改应用程序，以便您可以正确切换按钮以在 ON state 和 OFF state 之间切换。当按钮打开并被单击时，它会关闭并且其中的文本从 ON 变为 OFF 并且反之亦然。 您可以自由添加类和 styles，但请确保保留元素 ID 的原样。


    import $ from "jquery"
    
    const rootApp = document.getElementById("root");
    rootApp.innerHTML = '<button>ON</button>';

所以我试过了

import $ from "jquery"

function toggle(button)
{
    switch(button.value)
    {
        case "ON":
            button.value = "OFF";
            break;
        case "OFF":
            button.value = "ON";
            break;
    }
}

const rootApp = document.getElementById("root");
rootApp.innerHTML = '<input type = "button" value = "ON" id = "button" onclick = "toggle();"/>'

我是 JavaScript 的新手，这就是我在这里寻求帮助的原因。

Answer 1

我认为这会奏效....

 let root = document.getElementById("root"); $(document).ready(function(){ $("#root").click(function(){ if(root.value === "on"){ root.value="off"; } else{ root.value="on"; } }); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="button" id="root" value="off">

Answer 2

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">

    <title>Javascript Button Toggle</title>
  </head>
  <body>
   
    <h1>Javascript Button Toggle</h1>
    
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
  <label class="form-check-label" for="flexSwitchCheckDefault">Toggle Button</label>
</div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        const btn = document.querySelector('.form-check-input');
        const label = document.querySelector('.form-check-label');
        
        btn.addEventListener('change', function(){
           this.checked ? label.innerHTML = 'Button Turned On' : label.innerHTML = 'Button Turned Off';
        });
    </script>
  </body>
</html>

Answer 3

import $ from "jquery" 
const rootApp = document.getElementById("root"); rootApp.innerHTML = '<button>ON</button>';
$(document).ready(function(){
  $("#root").click(function(){ 
    if(rootApp.innerHTML = '<button>ON</button>'){
      rootApp.innerHTML = '<button>OFF</button>';
    }else{
      rootApp.innerHTML = '<button>ON</button>';
    }
  });
 });

Answer 4

import $ from "jquery" 
const rootApp = document.getElementById("root");  rootApp.innerHTML = '<button>ON</button>';
$(document).ready(function() {
    $("#root").click(function() { 
        (rootApp.innerHTML == '<button>OFF</button>') ? 
            rootApp.innerHTML='<button>ON</button>' : 
            rootApp.innerHTML='<button>OFF</button>';
    });
});

Answer 5

import $ from "jquery";
  $(function(){
  $("#btn").click(function(){

    if ($("#btn").text() == "ON")
    {
      $("#btn").text("OFF")
    }
    else if ($("#btn").text() == "OFF")
    {
      $("#btn").text("ON")
    }

    }
  )
})
const rootApp = document.getElementById("root");
rootApp.innerHTML = '<button id = "btn">ON</button>';

Answer 6

 import $ from "jquery"; $(document).ready(function(){ $("#root").click(function(){ if (rootApp.innerHTML === '<button>ON</button>'){ rootApp.innerHTML = '<button>OFF</button>'; } else { rootApp.innerHTML = '<button>ON</button>'; } }) }) const rootApp = document.getElementById("root"); rootApp.innerHTML = '<button>ON</button>';

JavaScript 按钮切换：代码完成

问题描述

6 个解决方案

解决方案1
0 2021-03-10 14:42:27

解决方案2
0 已采纳 2021-03-10 14:46:27

解决方案3
0 2021-08-03 12:32:00

解决方案4
0 2021-10-01 20:53:54

解决方案5
0 2021-10-31 22:22:02

解决方案6
0 2022-02-26 07:31:54

JavaScript 按钮切换：代码完成

问题描述

6 个解决方案

解决方案1 0 2021-03-10 14:42:27

解决方案2 0 已采纳 2021-03-10 14:46:27

解决方案3 0 2021-08-03 12:32:00

解决方案4 0 2021-10-01 20:53:54

解决方案5 0 2021-10-31 22:22:02

解决方案6 0 2022-02-26 07:31:54

解决方案1
0 2021-03-10 14:42:27

解决方案2
0 已采纳 2021-03-10 14:46:27

解决方案3
0 2021-08-03 12:32:00

解决方案4
0 2021-10-01 20:53:54

解决方案5
0 2021-10-31 22:22:02

解决方案6
0 2022-02-26 07:31:54