为什么单击按钮时我的 Fewest Clicks 模态打开，但其他模态都没有打开？

Question

I use modals with buttons.我使用带按钮的模式。 I don't know why only one works when I click the button.我不知道为什么单击按钮时只有一个有效。 The code is the same for all of them I think.我认为所有这些代码都是相同的。 Can someone help?有人可以帮忙吗？
All the code is below I have no idea how to fix this.所有代码都在下面我不知道如何解决这个问题。 I just started using JavaScript so there is probably something that I missed or didn't add.我刚开始使用 JavaScript，所以可能有一些我遗漏或没有添加的内容。 Also any tips that I could do better next time?还有下次我可以做得更好的提示吗？

<html>
<title> Singleplayer | WikiRun </title>
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<img src="/logo.png" alt="The WikiRuns Logo"style="margin-left:542;">

<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg=="
     crossorigin="anonymous" referrerpolicy="no-referrer" />



</head>
<style>
    /* Style buttons */
    .btn {
        background-color: DodgerBlue;
        /* Blue background */
        border: none;
        /* Remove borders */
        color: white;
        /* White text */
        padding: 11px 12px;
        /* Some padding */
        font-size: 16px;
        /* Set a font size */
        cursor: pointer;
        /* Mouse pointer on hover */
        border-radius: 16px;
        width: 32em;
        height: 3.5em;
        margin: 12;
        margin-left: 400;
        margin-top: 50;
        text-anchor: middle;

    }

    /* Darker background on mouse-over */
    .btn:hover {
        background-color: RoyalBlue;
    }

    /*so that the link does not have a different color*/
    a:link:active,
    a:visited:active {
        color: black;
    }

    a:link,
    a:visited {
        color: black;
        text-decoration: 0;
        cursor: pointer;
    }

    /*paragraph*/
    p {
        color: black;
        text-align-last: top;
        margin-left: 370;
        margin-top: 50;
        margin: 12;
    }
</style>
<link rel="stylesheet" href="/css/singleply.css">
<a href="/index.html"><button class="btn"><i class="fa fa-house"></i></button> </a> 
<button id="golfButton" class="btn"><i class="fa fa-solid fa-golf-ball-tee"></i>  Wiki Golf</button> 
<button id="clicksButton" class="btn"><i class="fa fa-solid fa-arrow-pointer"></i> Fewest Clicks</button> 



<button id="timed" class="btn"><i class="fa-solid fa-hourglass"></i> Timed</button>

<!-- MODALS -->



<!--Wiki Golf-->
<script>
  // Get the modal
var modalGolf = document.getElementById("golfModal");

// Get the button that opens the modal
var btnGolf = document.getElementById("golfButton");

// Get the <span> element that closes the modal
var spanGolf = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btnGolf.onclick = function() {
  modalGolf.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
spanGolf.onclick = function() {
  modalGolf.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modalGolf) {
    modalGolf.style.display = "none";
  }
}
</script>
<!-- The Modal -->
<div id="golfModal" class="modalGolf">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    </div>
    <!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">&times;</span>
    <h2>Wiki Golf</h2>
  </div>
  <div class="modal-body">
    <p>Wiki Golf is a good Choice!</p>
    <p>The goal of Wiki Golf is to get to the page "Jesus" in under 5 moves. For more information, click <a href="/howto/howto.html"> here. </a> 
      <br> 
      

    </p>
  </div>
  <div class="modal-footer">
    <h3> <a href="/game/wikigolf.html">Start </a></h3>
  </div>
</div>
  </div>

</div> 


<!-- END OF WIKI GOLF MODAL -->


<!-- TIMED MODAL -->  


<div id="timed" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    </div>
    <!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">&times;</span>
    <h2>Timed Mode</h2>
  </div>
  <div class="modal-body">
    <p>Same Rules as other versions of Wiki Run</p>
    <p>When you are ready, click start below. Before you start your game, start the stop watch that is below the wiki article. Before you start, choose a end page. A random one will automatically load when you click start. It will be small and on the bottom right of your screen. Before starting the timer, scroll around the page and look for the title. If you want to try to reach one you chose yourself, completly disregard the random one. Then, click start below and start your timer!
      <br> 
      

    </p>
  </div>
  <div class="modal-footer">
    <h3> <a href="/game/timed.html">Start </a></h3>
  </div>
</div>
  </div>

</div> 

<script>
  // Get the modal
var modalTimed = document.getElementById("timed");

// Get the button that opens the modal
var btnTimed = document.getElementById("timed");

// Get the <span> element that closes the modal
var spanTimed = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btnTimed.onclick = function() {
  modalTimed.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
spanTimed.onclick = function() {
  modalTimed.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modalClicks) {
    modalTimed.style.display = "none";
  }
}
</script>


<!-- END OF TIMED MODAL -->


<!-- FEWEST CLICKS MODAL-->


<!-- The Modal -->
<div id="clicksModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
    </div>
    <!-- Modal content -->
<div class="modal-content">
  <div class="modal-header">
    <span class="close">&times;</span>
    <h2>Fewest Clicks</h2>
  </div>
  <div class="modal-body">
    <p>Same Rules as other versions of Wiki Run</p>
    <p>This Mode is just timed but instead of timed, it scores based on your click count. If you need help or want to learn how to play click <a href="/howto/howto.html"> here </a>
      <br> 
      

    </p>
  </div>
  <div class="modal-footer">
    <h3> <a href="/game/fewestclicks.html">Start </a></h3>
  </div>
</div>
  </div>

</div>

<script>
  // Get the modal
var modalClicks = document.getElementById("clicksModal");

// Get the button that opens the modal
var btnClicks = document.getElementById("clicksButton");

// Get the <span> element that closes the modal
var spanClicks = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btnClicks.onclick = function() {
  modalClicks.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
spanClicks.onclick = function() {
  modalClicks.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modalClicks) {
    modalClicks.style.display = "none";
  }
}
</script>

<!-- END OF FEWEST CLICKS MODAL -->


<!-- STYLE FOR ALL MODALS -->

<style>
/* The Modal (background) */
.modalGolf {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color:rgb(255,0,0) ;/* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.7s
}
/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0px; opacity: 1}
}

</style>
<style>
/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color:rgb(255,0,0) ;/* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #5cb85c;
  color: white;
}

/* Modal Content */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  border: 1px solid #888;
  width: 80%;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
  animation-name: animatetop;
  animation-duration: 0.7s
}
/* Add Animation */
@keyframes animatetop {
  from {top: -300px; opacity: 0}
  to {top: 0px; opacity: 1}
}

</style>
<!-- END OF STYLE FOR ALL MODALS -->

Answer 1

<button id="timed" and <div id="timed" have same ID. <button id="timed"和<div id="timed"具有相同的 ID。 ID should be unique for all HTML elements. ID 对于所有 HTML 元素应该是唯一的。 JavaScript finds by ID only first occurrence of an element. JavaScript 按 ID 仅查找元素的第一次出现。 var modalTimed and btnTimed are assigned to the same element because their IDs are identic. var modalTimed和btnTimed被分配给同一个元素，因为它们的 ID 相同。 Change these.改变这些。

var modalGolf defined before the HTML element that matches it. var modalGolf在与其匹配的 HTML 元素之前定义。 When you want to get an HTML element with JS, you should write that JS after an appropriate HTML is rendered.当你想用 JS 得到一个 HTML 元素时，你应该在渲染一个适当的 HTML 之后编写那个 JS。 It's because code is executed line by line from top to bottom.因为代码是从上到下一行一行执行的。 JS at the top can't access HTML at the bottom.顶部的JS访问不到底部的HTML。 Other code that references to var modalGolf will not work.引用var modalGolf的其他代码将不起作用。 var spanGolf will not work, a reason is same. var spanGolf不起作用，原因是一样的。

Write all of your JS at the bottom of body tag.将所有 JS 写在body标签的底部。 This will make your code cleaner and more understandable.这将使您的代码更清晰，更易于理解。 Remember, JS blocks the code that after it from rendering/execution until it's done.请记住，JS 会阻止它之后的代码呈现/执行，直到完成为止。 So write your JS at the top of the page if you really need it所以如果你真的需要的话，把你的JS写在页面的顶部

Correct HTML document structure:更正 HTML 文档结构：

<html>
   <head>
       here you put link tags, style 
       tags, script tags, title tag
   </head>
   <body>
       here is a visible part of your 
       page. May include scripts at the 
       bottom of this tag
   </body>
</html>

为什么单击按钮时我的 Fewest Clicks 模态打开，但其他模态都没有打开？

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-02-10 01:32:12

为什么单击按钮时我的 Fewest Clicks 模态打开，但其他模态都没有打开？

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-02-10 01:32:12

解决方案1
1 已采纳 2022-02-10 01:32:12