Why does my Fewest Clicks modal open when I click the button but none of my other ones open?
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. 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">×</span>
</div>
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</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">×</span>
</div>
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</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">×</span>
</div>
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</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 -->
1 answers
solution1
1 ACCPTED 2022-02-10 01:32:12
<button id="timed" and <div id="timed" have same ID. ID should be unique for all HTML elements. JavaScript finds by ID only first occurrence of an element. var modalTimed and btnTimed are assigned to the same element because their IDs are identic. Change these.
var modalGolf defined before the HTML element that matches it. When you want to get an HTML element with JS, you should write that JS after an appropriate HTML is rendered. It's because code is executed line by line from top to bottom. JS at the top can't access HTML at the bottom. Other code that references to var modalGolf will not work. var spanGolf will not work, a reason is same.
Write all of your JS at the bottom of body tag. This will make your code cleaner and more understandable. Remember, JS blocks the code that after it from rendering/execution until it's done. So write your JS at the top of the page if you really need it
Correct HTML document structure:
<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>
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.
Related Question
I want to add edit button on my table and open the form on model when click demo modal button?
My Bootstrap Modal is Taking two clicks to open
Why does my modal open in the background?
Open modal when click on button
Why does my Hpp payment function take two clicks to open?
Why at extra small screen size, my collapse button doesn't open when i click on it?
Why does my js modal not close when I click outside?
Why does my fancybox not open on $('.selector').click()?
Why does my hover button dropdown not stay open when I mouse-over?
How can I open the modal when I click the delete button?
Related Tags