我是编码新手，我试图为按钮选择创建一个简单的代码。
用户有两个选择，在选择按钮A或时按钮B，出现另一个按钮(Let's Go!)，它将把用户带到另一个页面。
我目前的代码的问题是，按钮A和按钮B最终切换隐藏/显示"Let's Go"按钮。它不应该这样做，因为"Let's Go!"应该在第一次选择时出现并显示，而不是在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>这很简单，从函数和其中的代码中删除else部分。您永远不希望按钮再次消失，所以您不需要该代码。
所以你的代码应该是:function showLetsGoBtn() {
var x = document.getElementById("letsGoBtn");
if (x.style.display === "none") {
x.style.display = "block";
}
}
if-部分表示:如果按钮是隐藏的，则显示它。else部分说:如果你的按钮没有被隐藏隐藏它。
<div class="letsGo" style="display: none;">
<button>
Let's Go!
</button>
</div>