Question

我要实现的目标是在打开和关闭时更改btn的名称，但是，当我分别测试功能时，它可以正常工作，但是当我将两个功能组合到一个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

您的代码有两个主要问题：

if (status = true)将执行分配，而不是相等性检查。
- 您应该为此使用==或===。尽管由于要检查布尔值，所以不需要else if-如果status不是false，则只能是true。你可以做

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

您两次设置了status = false和status = true。首先在myFunction中，然后在nameFunction中。因此，在调用处理程序时，myFunction检查状态，发现status是false切换到true，然后在nameFunction运行时，{{1} }现在是status，应该在true的位置。
- 您可以提取代码以更改false值，并且只能从一个地方调用它。其他两项功能都完成后，我将其移至status：

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;
}

Answer 2

根据您的代码，else if (status = true)应该为else if (status == true)或else if (status === true)

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

2 个答案: