隐藏在Javascript中后按钮不显示
[英]Buttons are not showing up after being hidden in Javascript
问题描述
I have a bunch of buttons, some shown some hidden. 
我有一堆按钮，有些显示为隐藏。 When the shown buttons are clicked, they should get hidden and a select few of the hidden buttons should get shown. 单击显示的按钮时，它们应该被隐藏，并且应该显示一些隐藏按钮。 Unfortunately, only the shown buttons are becoming hidden. 不幸的是，只有显示的按钮被隐藏了。 The hidden buttons don't appear. 隐藏的按钮不会出现。
I have tried different display types for the buttons, but I actually no nothing of html, CSS, or Javascript to know what I am doing or if what I am doing changes anything. 我为按钮尝试了不同的显示类型，但实际上我什么也没有html，CSS或Javascript来知道我在做什么，或者我在做什么是否改变了任何东西。
html: 的HTML：
hideGenres(); function proudCondfidentResults() { hideFeelings(); showIndustrialGothicButton(); showMetalButton(); } function powerfulPumpedResults() { hideFeelings(); } function showIndustrialGothicButton() { document.getElementById("industrialGothic").style.display = "block"; } function showMetalButton() { document.getElementById("metal").style.display = "block"; } function hideFeelings() { document.getElementById("feelingButtons").style.display = "none"; } function hideGenres() { document.getElementById("genreButtons").style.display = "none"; }
button { font-family: 'Work Sans', sans-serif; font-size: 24px; background-color: #279; color: #fff; border: 0; border-radius: 3px; cursor: pointer; margin-right: 0.5%; margin-bottom: 0.5%; display: block; height: 20%; width: 49%; float: left; } button:hover { background-color: #38a; }
<div id="feelingButtons"> <button id="proudConfident" onclick="proudCondfidentResults()">Proud/Confident</button> <button id="powerfulPumped" onclick="powerfulPumpedResults()">Powerful/Pumped</button> </div> <div id="genreButtons"> <button id="industrialGothic" onclick="industrialGothicLink()">Industrial/Gothic</button> <button id="metal" onclick="metalLink()">Metal</button> </div>
When the Proud/Confident button is clicked I expect to have the Proud/Confident and Powerful/Pumped buttons disappear and for the Industrial/Gothic and Metal buttons to appear. 单击“ Proud/Confident按钮时，我希望“ Proud/Confident和“ Powerful/Pumped按钮消失，并出现“ Industrial/Gothic和“ Metal按钮。 What happens currently is the Proud/Confident and Powerful/Pumped buttons disappears, but the Industrial/Gothic and Metal buttons stay hidden. 当前发生的是“ Proud/Confident和“ Powerful/Pumped按钮消失，而“ Industrial/Gothic和“ Metal按钮保持隐藏状态。 How do you make it so that the Industrial/Gothic and Metal buttons are shown? 如何使它显示“ Industrial/Gothic和“ Metal按钮？
2 个解决方案
解决方案1
0 2019-01-06 03:04:49
You need to change the display style of genreButtons div 您需要更改genreButtons div的显示样式
hideGenres(); function proudCondfidentResults() { hideFeelings(); industrialGothicLink(); showMetalButton(); } function powerfulPumpedResults() { hideFeelings(); } function industrialGothicLink() { document.getElementById("industrialGothic").style.display = "block"; } function showMetalButton() { document.getElementById("metal").style.display = "block"; } function hideFeelings() { document.getElementById("feelingButtons").style.display = "none"; //changed here document.getElementById("genreButtons").style.display = "block"; } function hideGenres() { document.getElementById("genreButtons").style.display = "none"; }
button { font-family: 'Work Sans', sans-serif; font-size: 24px; background-color: #279; color: #fff; border: 0; border-radius: 3px; cursor: pointer; margin-right: 0.5%; margin-bottom: 0.5%; display: block; height: 20%; width: 49%; float: left; } button:hover { background-color: #38a; }
<div id="feelingButtons"> <button id="proudConfident" onclick="proudCondfidentResults()">Proud/Confident</button> <button id="powerfulPumped" onclick="powerfulPumpedResults()">Powerful/Pumped</button> </div> <div id="genreButtons"> <button id="industrialGothic" onclick="industrialGothicLink()">Industrial/Gothic</button> <button id="metal" onclick="metalLink()">Metal</button>
解决方案2
0 2019-01-06 03:09:18
Try hiding the Genre Buttons div by default via CSS (display:none). 尝试默认通过CSS隐藏“类型按钮” div（显示：无）。 Once Proud/Confident are clicked, the genreButtons div will show as desired. 单击“骄傲/自信”后，genreButtons div将根据需要显示。 This way, all the elements within the genre's div will toggle together. 这样，流派div中的所有元素将一起切换。
<html><body>
<style>
button {
font-family: 'Work Sans', sans-serif;
font-size: 24px;
background-color: #279;
color: #fff;
border: 0;
border-radius: 3px;
cursor: pointer;
margin-right: 0.5%;
margin-bottom: 0.5%;
display: block;
height: 20%;
width: 49%;
float: left;
}
button:hover {
background-color: #38a;
}
#genreButtons {
display: none;
}
</style>
<script>
hideGenres();
function proudCondfidentResults() {
hideFeelings();
showIndustrialGothicButton();
showMetalButton();
}
function powerfulPumpedResults() {
hideFeelings();
}
function showIndustrialGothicButton() {
document.getElementById("industrialGothic").style.display = "block";
}
function showMetalButton() {
document.getElementById("genreButtons").style.display = "block";
}
function hideFeelings() {
document.getElementById("feelingButtons").style.display = "none";
}
function hideGenres() {
document.getElementById("genreButtons").style.display = "none";
}
</script>
<div id="feelingButtons">
<button id="proudConfident" onclick="proudCondfidentResults()">Proud/Confident</button>
<button id="powerfulPumped" onclick="powerfulPumpedResults()">Powerful/Pumped</button>
</div>
<div id="genreButtons">
<button id="industrialGothic" onclick="industrialGothicLink()">Industrial/Gothic</button>
<button id="metal" onclick="metalLink()">Metal</button>
</div></body></html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.