时间戳

首页 > 解决方案 > 隐藏在 Javascript 中后，按钮未显示

javascript - 隐藏在 Javascript 中后，按钮未显示

问题描述

我有一堆按钮，有些显示有些隐藏。单击显示的按钮时，它们应该被隐藏，并且应该显示一些隐藏的按钮。不幸的是，只有显示的按钮被隐藏了。隐藏的按钮不会出现。

我已经为按钮尝试了不同的显示类型，但实际上我没有 html、CSS 或 Javascript 来知道我在做什么，或者我在做什么改变了任何东西。

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>

单击按钮时，Proud/Confident我希望Proud/ConfidentandPowerful/Pumped按钮消失，而Industrial/GothicandMetal按钮会出现。当前发生的是Proud/ConfidentandPowerful/Pumped按钮消失，但Industrial/GothicandMetal按钮保持隐藏。你如何使它显示Industrial/Gothic和Metal按钮？

标签： javascripthtml

解决方案

需要更改genreButtonsdiv的显示样式

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>

推荐阅读