Fatal编程技术网
  • javascript/
  • JavaScript按钮切换：代码完成

JavaScript按钮切换：代码完成

javascript jquery

JavaScript按钮切换：代码完成,javascript,jquery,Javascript,Jquery,问题是: 我们提供了一些简单的JavaScript模板代码。您的目标是修改应用程序，以便可以正确地切换按钮以在打开状态和关闭状态之间切换。当按钮打开并单击时，它将关闭，其中的文本将从打开变为关闭，反之亦然。您可以自由添加类和样式，但请确保元素ID保持原样 import $ from "jquery" const rootApp = document.getElementById("root"); rootApp.inne

问题是:

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


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



从“jquery”导入$
const rootApp=document.getElementById（“根”）；
rootApp.innerHTML='ON'；
所以我试过了

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();"/>'

从“jquery”导入$
功能切换（按钮）
{
开关（按钮值）
{
案例“关于”：
button.value=“关”；
打破
案例“关闭”：
button.value=“ON”；
打破
}
}
const rootApp=document.getElementById（“根”）；
rootApp.innerHTML=“”
我不熟悉JavaScript，这就是我来这里寻求帮助的原因。

我认为这会奏效

let root=document.getElementById（“root”）；
$（文档）.ready（函数（）{
$（“#根”）。单击（函数（）{
如果（root.value==“on”）{
root.value=“关”；
}
否则{
root.value=“on”；
}
});
});




Javascript按钮切换
Javascript按钮切换
切换按钮
const btn=document.querySelector（'.form check input'）；
const label=document.querySelector（'.form check label'）；
btn.addEventListener（'change'，function（）{
this.checked？label.innerHTML='按钮已打开'：label.innerHTML='按钮已关闭'；
});

我们来这里不是为了做作业或回答一个显然是为了家庭作业或其他什么的问题。向我们展示您的尝试，请参见。堆栈溢出不接受家庭作业转储。@我知道，但至少有一个可以引导另一个无知的人走向正确的方向！

<!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>