选择按钮 A 或按钮 B 时显示按钮。 HTML/CSS/JScript

Question

我是编码新手，正在尝试创建用于按钮选择的简单代码。

用户在加载时有两个选择，选择按钮 A 或按钮 B 后，会出现另一个按钮（让我们开始吧！），它将把用户带到不同的页面.

我当前代码的问题是按钮 A 和按钮 B 最终切换 hide/show 为“让我们开始”按钮。它不应该那样做，因为 “我们走吧！”应该出现在第一个选择中并贯穿始终，而不是在 hide/show.

之间切换

我很开放，感谢您就如何实现我的代码预期结果提出的任何和所有建议。非常感谢您的宝贵时间！

我的代码如下：

  function showLetsGoBtn() {
    var x = document.getElementById("letsGoBtn");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
  }

body {
  background:#ddd;
  font-family: "Raleway";
}

.center {
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}


/*  Start popup container */
.popup {
  width:600px;
  height:696px;
  padding:30px 20px;
  background:#f5f5f5;
  border-radius:10px;
  box-sizing:border-box;
  z-index:2;
  text-align:justified;
}
/*  End popup container */

.popup .title {
  margin:5px 0px;
  font-size:24px;
  font-weight:600;
}

.popup .description{
  color:#222;
  font-size:16px;
  padding:5px;
}



/* - Start btnA -*/
.popup .btnA {
  margin-top:10px;
}

.popup .btnA button {
  background:#f5f5f5;
  color:#0C59AC;
  font-size:14px;
  font-weight:600;
  border-radius:4px;
  cursor:pointer;
  width: 202px;
  height: 80px;
  text-align:center;
  border-width: 1px;
  border-color: #0C59AC;
}

.popup .btnA button:focus {
  color:#f5f5f5;
  background:#0C59AC;
  opacity: 100%;
}
/* - End btnA -*/



/* - Start btnB -*/
.popup .btnB {
  margin-top:20px;
}

.popup .btnB button {
  background:#f5f5f5;
  color:#0C59AC;
  font-size:14px;
  font-weight:600;
  border-radius:4px;
  cursor:pointer;
  width: 202px;
  height: 80px;
  text-align:center;
  border-width: 1px;
  border-color: #0C59AC;
}

.popup .btnB button:focus {
  color:#f5f5f5;
  background:#0C59AC;
  opacity: 100%;
}
/* End btnB */



/* Start letsGo */
.popup .letsGo {
  margin-top:20px;  
}

.popup .letsGo button {
  background:#0C59AC;
  color:#f5f5f5;
  font-size:14px;
  font-weight:600;
  border-radius:4px;
  cursor:pointer;
  width: 202px;
  height: 35px;
  text-align:center;
  opacity: 100%;
  border-width: 1px;
  border-color: #0C59AC;
}
/* End letsGo */

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>showBtnOnClick</title>

  <link rel="stylesheet" href="styles.css">
  <script src="script.js"></script>

</head>

<body>
  <!-- Setup divs for modal.-->
  <div class="popup center">

    <div class="title">
      Click Any Button
    </div>

    <div class="description">
      <h5>Intention:</h5>
      <ol>
        <li><strong>Let's Go!</strong> Btn hidden on-load.</li>
        <li>Button A & Button B change colour onclick (blue)</li>
        <li><mark><strong>Let's Go!</strong> Btn appears when either Button A or Button B is clicked (blue).</mark></li>
      </ol>
      <h5>Problem with Current Code:</h5>
      <ul>
        <li>For point 3, my code toggles hide/show for <strong>Let's Go!</strong>
          <br>
          <strong>Let's Go!</strong> is to always show once the user selects either Button A or B at the start.
        </li>
      </ul>
      <p></p>
    </div>
    
    <div class="btnA">
      <button  onclick="showLetsGoBtn()">
        Button A
      </button>
    </div>

    <div class="btnB">
      <button onclick="showLetsGoBtn()">
        Button B
      </button>
    </div>

    <div class="letsGo" id=letsGoBtn style="display: none;">
      <button>
        Let's Go!
      </button>
    </div>
  </div>

</body>
</html>

Answer 1

这很简单，从您的函数和其中的代码中删除 else 部分。您永远不希望按钮再次消失，因此您不需要该代码。

所以你的代码应该是：

function showLetsGoBtn() {
    var x = document.getElementById("letsGoBtn");
    if (x.style.display === "none") {
      x.style.display = "block";
    }
  }

if 部分表示：如果您的按钮被隐藏，则显示它。其他部分说：如果您的按钮没有隐藏，请隐藏它。

Answer 2

<div class="letsGo" style="display: none;">
  <button>
    Let's Go!
  </button>
</div>

选择按钮 A 或按钮 B 时显示按钮。 HTML/CSS/JScript

Show a button when either Button A or Button B is selected. HTML/CSS/JScript

html

javascript

css

onclick

show