单击“小狗”按钮时出现奇怪的网格结果

问题描述 投票：0回答：1

我有一个假狗收养网站，我只是一个初学者，所以没什么特别的。我将其设置为您可以单击 6 个按钮中的 1 个，它将显示每只狗的符合描述的小图片。如果您第二次单击该按钮，图片就会消失。

似乎一切功能正常，除了“小狗”按钮对“特殊需要”按钮有奇怪的影响。我不知道为什么，但一个按钮会改变另一个按钮的位置。我整个周末都在研究这个问题，我已经很接近让它看起来正确了。

拜托，如果你能弄清楚我做错了什么，请告诉我！

<!DOCTYPE html>
<html lang="en">
    <header> <!--  ******* HEADER OPEN ********** --> 
    Stack Overflow Help Example <BR>
    <link rel="stylesheet" href="SOFEX.css">
    <script src="SOFEX.js" type="text/javascript"></script>
    </header> <!--  ******* HEADER CLOSED********** -->
<body>  
<main> <br>

    <div class="grid-container6">
        <div class="row"> <!-- **************   GRID OPEN ************  -->
            <div class="column">            
            <button onclick="showMalesFunction()"> Show Male Dogs </button>
            <div id="MalesBtn"> </div>
            </div>
    <!--  ************************************* -->
            <div class="column"> 
        <button onclick="showFemalesFunction()"> Show Female Dogs </button>
        <div id="FemalesBtn"> </div>
        </div>
    <!--  ************************************* -->
        <div class="column">
        <button onclick="showPuppiesFunction()"> 
        Show Puppy Dogs </button>
        <div id="PuppiesBtn"> </div>
        </div>
     <!--  ************************************* -->
        <div class="column"> 
        <button onclick="showAdultFunction()"> Show Adult Dogs </button>
        <div id="AdultBtn"> </div>
        </div>
<!--  ************************************* -->
        <div class="column">  
        <button onclick="showSeniorFunction()"> 
          Show Senior Dogs </button>
        <div id="SeniorBtn"> </div>
        </div>
<!--  ************************************* -->
        <div class="column">  
        <button onclick="SpecialNeedsFunction()"> Dogs With Special Needs </button>
        <div id="SpecialNeedsBtn"> </div>
        </div>
    </div>
  </div> <!-- ************** grid closed ********************-->
<script>

//---------------------------------------------------------//
var MaleArray = [
  "<a href='Boris.html'><img src='BorisGut.jpg' alt='marker.gif' style='width:20%'></a>", 
  "<a href='Harley.html'><img src='Harley Santa hat.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Max.html'> <img src='Max.png' alt='image.gif' style='width:20%'></a>",
];

function showMalesFunction() {
  var x = document.getElementById("MalesBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("MalesBtn").innerHTML = MaleArray; 
  } else {
    x.style.display = "none";
  } }
//---------------------------------------------------------//
var FemaleArray = [
  "<a href='Lucy.html'><img src='LucyPage.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Daisy.html'><img src='DaisyBirthdayHat.jpeg' alt='image.gif' style='width:20%'></a>",
  "<a href='Honey.html'><img src='Honey.png' alt='image.gif' style='width:20%'></a>",
  "<a href='Dolly.html'><img src='Dolly.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Birdie.html'> <img src= 'Birdie Girdie.jpg' alt='image.gif' style='width:20%'></a>"
];

function showFemalesFunction() {
  var x = document.getElementById("FemalesBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("FemalesBtn").innerHTML = FemaleArray; 
  } else {
    x.style.display = "none";
  } }

//---------------------------------------------------------//
var PuppiesArray = [
  "<a href='Lucy.html'><img src='LucyPage.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Honey.html'><img src='Honey.png' alt='image.gif' style='width:20%'></a>",
  "<a href='Dolly.html'><img src='Dolly.jpg' alt='image.gif' style='width:20%'></a>"
];

function showPuppiesFunction() {
  var x = document.getElementById("PuppiesBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("PuppiesBtn").innerHTML = PuppiesArray; 
  } else {
    x.style.display = "none";
  } }

//---------------------------------------------------------//
var AdultArray = [
  "<a href='Boris.html'><img src='BorisGut.jpg' alt='marker.gif' style='width:20%'></a>", 
  "<a href='Daisy.html'><img src='DaisyBirthdayHat.jpeg' alt='image.gif' style='width:20%'></a>",
  "<a href='Harley.html'><img src='Harley Santa hat.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Birdie.html'> <img src= 'Birdie Girdie.jpg' alt='image.gif' style='width:20%'></a>"
];

function showAdultFunction() {
  var x = document.getElementById("AdultBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("AdultBtn").innerHTML = AdultArray; 
  } else {
    x.style.display = "none";
  } }

  //---------------------------------------------------------//
var SeniorArray = [
  "<a href='Max.html'> <img src='Max.png' alt='image.gif' style='width:20%'></a>"
];

function showSeniorFunction() {
  var x = document.getElementById("SeniorBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("SeniorBtn").innerHTML = SeniorArray; 
  } else {
    x.style.display = "none";
  } }
  
//---------------------------------------------------------//
var SpecialNeedsArray = [
  "<a href='Dolly.html'><img src='Dolly.jpg' alt='image.gif' style='width:20%'></a>",
  "<a href='Max.html'> <img src='Max.png' alt='image.gif' style='width:20%'></a>"
]
function SpecialNeedsFunction() {
  var x = document.getElementById("SpecialNeedsBtn");
  if (x.style.display === "none") {
    x.style.display = "block"
    document.getElementById("SpecialNeedsBtn").innerHTML = SpecialNeedsArray; 
  } else {
    x.style.display = "none";
  } }
</script>
<style>

* {box-sizing: border-box; }

table {
  border: 2px solid #3399CC; 
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
td {padding: 0.5em; border: 2px solid #923cb1;text-align: left; }
th {padding: 0.5em; border: 2px solid #3399CC; text-align: center; }
tr:nth-of-type(odd){background-color: #f5fafc;}

.column {
  float: left;
  width: 50%;
  padding: 5px; }

.grid-container6 {  
  display: inline-grid; 
  grid-column: 10px; 
  text-align: center;
  width: 100%; 
  border: 10px; 
  position: relative;
  margin: 0 auto;
  border-color: purple;
  border-style: solid; 
column-gap: 10px;
row-gap: 10px; 
column-rule-color: #e0299a;
background-color: green; 
}

button {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  position: relative;  
  color: white;
  font-size: 24px;
  border-radius: 40px;
  margin: 0 auto;
  display: inline;
  outline: none;
  padding: 6px 12px;
  background-color:  #002171;
}
</style>

</div>
</div>
<!--  ************************************* -->

<!--  ************************************* -->
<!--  ************************************* -->
</main>            
</body>
</html>
javascript html css button grid
1个回答
0
投票

这里的问题是在定义时，您没有为每个显示 div 设置显示属性。例如：

<div id="MalesBtn"> </div>

所以当你尝试寻找元素时，

var x = document.getElementById("MalesBtn");

那么最初 x.style.display 是 ''。

因此它转到 else 块并将其显示属性设置为“none”。

现在，当您重新单击按钮时，这次 if 条件 

x.style.display === "none"
满足，并且显示该元素。

更简单的修复方法是首先检查显示状况：

if (x.style.display === "block") {
  x.style.display = "none";
} else {
   x.style.display = "block"
   x.innerHTML = MaleArray;
}
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.