Buttons are not showing up after being hidden in Javascript
Question
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:
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. What happens currently is the Proud/Confident and Powerful/Pumped buttons disappears, but the Industrial/Gothic and Metal buttons stay hidden. How do you make it so that the Industrial/Gothic and Metal buttons are shown?
2 answers
solution1
0 2019-01-06 03:04:49
You need to change the display style of 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>
solution2
0 2019-01-06 03:09:18
Try hiding the Genre Buttons div by default via CSS (display:none). Once Proud/Confident are clicked, the genreButtons div will show as desired. This way, all the elements within the genre's div will toggle together.
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.