我的代码有什么问题 - 它没有关闭

Question

What I am trying to achieve is to change the name of the btn when opening and closing, however, when I test the functions individually it works fine however when I combine both function in one btn it doesn't could someone help, please.我想要实现的是在打开和关闭时更改 btn 的名称，但是，当我单独测试功能时，它工作正常，但是当我将 function 组合在一个 btn 中时，它不会有人帮忙，拜托。

 // JavaScript Document let myBtn = document.querySelector("#btn"); let myBase = document.querySelector("#base"); let status = false; myBase.style.marginTop = "-250px"; function myFunction() { if (status === false) { myBase.style.marginTop = "-120px"; status = true; } else if (status = true) { myBase.style.marginTop = "-250px" status = false; } } //myBtn.onclick = myFunction; myBtn.innerHTML = "<P>OPEN</P>"; function nameFunction() { if (status === false) { myBtn.innerHTML = "<P>OPEN</P>"; status = true; } else if (status = true) { myBtn.innerHTML = "<P>CLOSE</P>"; status = false; } } // myBtn.onclick = nameFunction; function twoFunction() { myFunction(); nameFunction(); } myBtn.onclick = twoFunction;

 #btn { height: 30px; width: 50px; color: white; background: orange; line-height: 30px; margin-top: 50px; margin-left: 250px; padding: 10px; cursor: pointer } #base { padding: 10px; background: pink; width: 200px; height: 110px; margin-top: 0px; transition: 1s ease-in-out; } #base>div { height: 30px; width: auto; background: red; }

 <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="btn"> <p>OPEN</p> </div> <div id="base"> <div></div> <div></div> <div></div> </div> </body> <script src="js/scripts.js"></script> </html>

Answer 1

You have two main problems with the code:代码有两个主要问题：

if (status = true) will perform assignment , not equality check. if (status = true)将执行分配，而不是相等检查。
- You should use == or === for that.您应该为此使用==或=== 。 Although since you're checking a boolean, you don't need an else if - if status is not false , then it can only be true .虽然由于您正在检查 boolean，但您不需要else if - if status不是false ，那么它只能是true 。 You can just do你可以做

if (status === false) {
  /* ... code if false ... */
} else  {
  /* ... code if true ... */
}

You set status = false and status = true twice.您设置status = false和status = true两次。 First in myFunction , then in nameFunction .首先在myFunction中，然后在nameFunction中。 So when you the handler is invoked myFunction checks the status, sees status is false switches it to true and then when nameFunction runs, status is now true , where it should have been false .因此，当您调用处理程序时myFunction检查状态，看到status为false将其切换为true ，然后当nameFunction运行时， status现在为true ，它应该是false 。
- you can extract the code to change the status value and only call it from one place.您可以提取代码来更改status值，并且只能从一个地方调用它。 I moved it to twoFunction after both other functions have completed:在其他两个功能完成后，我将其移至twoFunction ：

 // JavaScript Document let myBtn = document.querySelector("#btn"); let myBase = document.querySelector("#base"); let status = false; myBase.style.marginTop = "-250px"; function myFunction() { console.log(status) if (status === false) { myBase.style.marginTop = "-120px"; } else { //no need for else if myBase.style.marginTop = "-250px" } } //myBtn.onclick = myFunction; myBtn.innerHTML = "<P>OPEN</P>"; function nameFunction() { if (status === false) { myBtn.innerHTML = "<P>OPEN</P>"; } else { //no need for else if myBtn.innerHTML = "<P>CLOSE</P>"; } } // myBtn.onclick = nameFunction; function twoFunction() { myFunction(); nameFunction(); //only set the status once if (status === false) { status = true; } else { status = false; } } myBtn.onclick = twoFunction;

 #btn { height: 30px; width: 50px; color: white; background: orange; line-height: 30px; margin-top: 50px; margin-left: 250px; padding: 10px; cursor: pointer } #base { padding: 10px; background: pink; width: 200px; height: 110px; margin-top: 0px; transition: 1s ease-in-out; } #base>div { height: 30px; width: auto; background: red; }

 <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div id="btn"> <p>OPEN</p> </div> <div id="base"> <div></div> <div></div> <div></div> </div> </body> <script src="js/scripts.js"></script> </html>

Answer 2

From your code, else if (status = true) should be else if (status == true) or else if (status === true)从您的代码中， else if (status = true)应该是else if (status == true)或else if (status === true)

我的代码有什么问题 - 它没有关闭

问题描述

2 个解决方案

解决方案1
2 2019-10-10 12:16:18

解决方案2
0 2019-10-10 12:18:44

我的代码有什么问题 - 它没有关闭

问题描述

2 个解决方案

解决方案1 2 2019-10-10 12:16:18

解决方案2 0 2019-10-10 12:18:44

解决方案1
2 2019-10-10 12:16:18

解决方案2
0 2019-10-10 12:18:44