On my website, I am trying to make an error pop up when an individual has less than a certain amount on their "site bank".
I tried many things. I first had one css id for all of them, and one javascript code for all the errors. Unfortunately, this only made the error for the first button, the 5 cent game, show up. The rest did nothing when i clicked on them.
Next, I made a different css id for all of them and added many javascript codes for each error, pertaining to each id. This made all of the errors show up, but all the if else statements became connected. If i had less than five dollars and more than two and a half, which is the next game mode, every single button would give me an error saying, "you need at least five dollars to play", even the lower gamemodes!
Now i am here, I have made a css class for each button and connected the javascript statements to their class, not their id. Now every button that i have enough money for is taking me to another page, which means it is working, but the games that i don't have enough money don't show an error, and nothing happens when i press them.
Here is my code for each button in html5:
<?php
session_start();
if ( $_SESSION['logged_in'] != 1 ) {
$signin = 'Sign Up / Login';
}
else {
$signin = 'Profile';
$cash_amount = $_SESSION['cash_amount'];
}
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Servers</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->
<link rel="stylesheet" href="assets/css/main.css" />
<!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
</head>
<body style=" margin:0; padding:0; height:100%;">
<div style="min-height:100%; position:relative;">
<div id="page-wrapper">
<div style="-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;"
unselectable="on"
onselectstart="return false;"
onmousedown="return false;">
<!-- Header -->
<header id="header">
<h1 id="logo"><a href="index.php">CashBallz</a></h1>
<nav id="nav">
<ul style="font-weight: bold;">
<li><a><img id="controllernavimage" src="images/controllerwhite.png" style="left: 69.5px"></a></li>
<li><a href="controls.php"><img id="controllernavimage" src="images/controller.png"></a></li>
<li><a href="index.php">Home</a></li>
<li><a href="servers.php" style="color: #e44c65;">Play</a></li>
<li><a href="elements.php">Paypal</a></li>
<li><a href="contact.php">Contact</a></li>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<?php else: ?>
<li><a href="elements.php"><?php echo '$'.$cash_amount ?></a></li>
<?php endif; ?>
<li>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<a href="loginsystem/loginpage.php" class="button special"><?php echo $signin ?></a>
<?php else: ?>
<a href="loginsystem/profile.php" class="button special"><?php echo $signin ?></a>
<?php endif; ?>
</li>
</ul>
</nav>
</header>
<!-- Main -->
<div id="main" class="wrapper style1">
<div class="container">
<header class="major">
<h2>Play</h2>
<p>Here is where you can play the game!</p>
</header>
<div id="gamebox" style="left: 125px; top: -30px;margin-right: -270px; " >
<h2 id='gameboxtitle'>5 Cent Game</h2>
<p id='gameboxtext'>You Must Have at Least 5 Cents in Your Site Bank to Play.<p>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton" class="play5">Play 5¢</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px">You Need To Sign Up Or Log In To Play The Game!</p>
</div>
</div>
</div>
<?php elseif ( $_SESSION['cash_amount'] < 0.05 ):?>
<!-- Trigger/Open The Modal -->
<button id="playbutton" class="play5">Play 5¢</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px; font-weight: bold;">You Need At Least 5 Cents In Your Account To Play!</p>
</div>
</div>
</div>
<?php else: ?>
<button id="playbutton" onclick="location.href='game/5clobby.html'">Play 5¢</button>
</div>
<?php endif; ?>
<!------------------------------->
<div id="gamebox" style="left: 375px; top: -300px; margin-right: -270px; margin-bottom: -270px; ">
<h2 id='gameboxtitle'>10 Cent Game</h2>
<p id='gameboxtext'>You Must Have at Least 10 Cents in Your Site Bank to Play.<p>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton10" class="play10">Play 10¢</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px">You Must Sign Up Or Log In To Play The Game!</p>
</div>
</div>
</div>
<?php elseif ( $_SESSION['cash_amount'] < 0.10 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton10" class="play10">Play 10¢</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px; font-weight: bold;">You Need At Least 10 Cents In Your Account To Play!</p>
</div>
</div>
</div>
<?php else: ?>
<button id="playbutton10" onclick="location.href='game/5clobby.html'">Play 10¢</button>
</div>
<?php endif; ?>
<!------------------------------->
<div id="gamebox" style="left: 625px;top: -300px; margin-right: -270px; margin-bottom: -270px; ">
<h2 id='gameboxtitle'>20 Cent Game</h2>
<p id='gameboxtext'>You Must Have at Least 20 Cents in Your Site Bank to Play.<p>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton20" class="play20">Play 20¢</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px">You Must Sign Up Or Log In To Play The Game!</p>
</div>
</div>
</div>
<?php elseif ( $_SESSION['cash_amount'] < 0.20 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton20" class="play20">Play 20¢</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px; font-weight: bold;">You Need At Least 20 Cents In Your Account To Play!</p>
</div>
</div>
</div>
<?php else: ?>
<button id="playbutton20" onclick="location.href='game/5clobby.html'">Play 20¢</button>
</div>
<?php endif; ?>
<!------------------------------->
<div id="gamebox" style="left: 875px;top: -300px; margin-right: -270px; margin-bottom: -270px; ">
<h2 id='gameboxtitle'>50 Cent Game</h2>
<p id='gameboxtext'>You Must Have at Least 50 Cents in Your Site Bank to Play.<p>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton50" class="play50">Play 50¢</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px">You Must Sign Up Or Log In To Play The Game!</p>
</div>
</div>
</div>
<?php elseif ( $_SESSION['cash_amount'] < 0.50 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton50" class="play50">Play 50¢</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px; font-weight: bold;">You Need At Least 50 Cents In Your Account To Play!</p>
</div>
</div>
</div>
<?php else: ?>
<button id="playbutton50" onclick="location.href='game/5clobby.html'">Play 50¢</button>
</div>
<?php endif; ?>
<!------------------------------->
<div id="gamebox" style="left: 125px;top: 10px; margin-right: -270px; ">
<h2 id='gameboxtitle'>$1.00 Game</h2>
<p id='gameboxtext'>You Must Have at Least $1.00 in Your Site Bank to Play.<p>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton100" class"play100">Play $1.00</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px">You Must Sign Up Or Log In To Play The Game!</p>
</div>
</div>
</div>
<?php elseif ( $_SESSION['cash_amount'] < 1.00 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton100" class="play100">Play $1.00</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px; font-weight: bold;">You Need At Least $1.00 In Your Account To Play!</p>
</div>
</div>
</div>
<?php else: ?>
<button id="playbutton100" onclick="location.href='game/5clobby.html'">Play $1.00</button>
</div>
<?php endif; ?>
<!------------------------------->
<div id="gamebox" style="left: 375px;top: -260px; margin-right: -270px; margin-bottom: -270px; ">
<h2 id='gameboxtitle'>$2.50 Game</h2>
<p id='gameboxtext'>You Must Have at Least $2.50 in Your Site Bank to Play.<p>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton250" class="play200">Play $2.50</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px">You Must Sign Up Or Log In To Play The Game!</p>
</div>
</div>
</div>
<?php elseif ( $_SESSION['cash_amount'] < 2.50 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton250" class="play250">Play $2.50</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px; font-weight: bold;">You Need At Least $2.50 In Your Account To Play!</p>
</div>
</div>
</div>
<?php else: ?>
<button id="playbutton250" onclick="location.href='game/5clobby.html'">Play $2.50</button>
</div>
<?php endif; ?>
<!------------------------------->
<div id="gamebox" style="left: 625px;top: -260px; margin-right: -270px; margin-bottom: -270px; ">
<h2 id='gameboxtitle'>$5.00 Game</h2>
<p id='gameboxtext'>You Must Have at Least $5.00 in Your Site Bank to Play.<p>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton00" class="play500">Play $5.00</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px">You Must Sign Up Or Log In To Play The Game!</p>
</div>
</div>
</div>
<?php elseif ( $_SESSION['cash_amount'] < 5.00 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton500" class="play500">Play $5.00</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px; font-weight: bold;">You Need At Least $5.00 In Your Account To Play!</p>
</div>
</div>
</div>
<?php else: ?>
<button id="playbutton500" onclick="location.href='game/5clobby.html'">Play $5.00</button>
</div>
<?php endif; ?>
<!------------------------------->
<div id="gamebox" style="left: 875px;top: -260px; margin-right: -270px; margin-bottom: -270px; ">
<h2 id='gameboxtitle'>$10.00 Game</h2>
<p id='gameboxtext'>You Must Have at Least $10.00 in Your Site Bank to Play.<p>
<?php if ( $_SESSION['logged_in'] != 1 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton1000" class="play1000">Play $10.00</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px">You Must Sign Up Or Log In To Play The Game!</p>
</div>
</div>
</div>
<?php elseif ( $_SESSION['cash_amount'] < 10.00 ): ?>
<!-- Trigger/Open The Modal -->
<button id="playbutton1000" class="play1000">Play $10.00</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p style="color: white; position: relative; top: 12px; font-weight: bold;">You Need At Least $10.00 In Your Account To Play!</p>
</div>
</div>
</div>
<?php else: ?>
<button id="playbutton1000" onclick="location.href='game/5clobby.html'">Play $10.00</button>
</div>
<?php endif; ?>
<!------------------------------->
<h1 style="position: relative; top: -1550px; font-size: 30px; text-align: center; font-family: Comic;">- Make Sure You Read The Controls And Instructions Before Playing! - </h1>
<h1 style="position: relative; top: -1540px; font-size: 20px; text-align: center; font-family: Comic;">(press the controller icon in the navigation bar)</h1>
</div>
<div style="position:absolute;
top: 1000px;
bottom:0;
width:100%;
height:60px;">
<!-- Footer -->
<footer id="footer">
<ul class="icons">
<li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
<li><a href="#" class="icon alt fa-envelope"><span class="label">Email</span></a></li>
</ul>
<ul class="copyright">
<li>© CashBalls.Co. All rights reserved.</li><li>Creator: CashBallz.Co</a></li>
</ul>
</footer>
</div>
<!-- Scripts -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/jquery.scrolly.min.js"></script>
<script src="assets/js/jquery.dropotron.min.js"></script>
<script src="assets/js/jquery.scrollex.min.js"></script>
<script src="assets/js/skel.min.js"></script>
<script src="assets/js/util.js"></script>
<!--[if lte IE 8]><script src="assets/js/ie/respond.min.js"></script><![endif]-->
<script src="assets/js/main.js"></script>
</div>
</div>
</div>
</body>
</html>
Here is my code for the css of each button and the error popup:
#playbutton {
width: 160px;
height: 50px;
border-radius: 20px;
background-color: rgb(77, 208, 117);
font-size: 23px;
text-align: center;
color: white;
letter-spacing: 2px;
border: 2px solid white;
top: 20px;
position: relative;
cursor: pointer;
display: inline-block;
}
#playbutton10 {
width: 160px;
height: 50px;
border-radius: 20px;
background-color: rgb(77, 208, 117);
font-size: 23px;
text-align: center;
color: white;
letter-spacing: 2px;
border: 2px solid white;
top: 20px;
position: relative;
cursor: pointer;
display: inline-block;
}
#playbutton20 {
width: 160px;
height: 50px;
border-radius: 20px;
background-color: rgb(77, 208, 117);
font-size: 23px;
text-align: center;
color: white;
letter-spacing: 2px;
border: 2px solid white;
top: 20px;
position: relative;
cursor: pointer;
display: inline-block;
}
#playbutton50 {
width: 160px;
height: 50px;
border-radius: 20px;
background-color: rgb(77, 208, 117);
font-size: 23px;
text-align: center;
color: white;
letter-spacing: 2px;
border: 2px solid white;
top: 20px;
position: relative;
cursor: pointer;
display: inline-block;
}
(and so on with 100, 250, 500, and 1000)
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: rgb(222, 58, 58);
margin: auto;
padding: 20px;
border: 2px solid #fff;
width: 40%;
height: 17%;
position: relative;
font-weight: bold;
font-size: 17px;
position: relative;
top: 35%;
border-radius: 5px;
}
/* The Close Button */
.close {
color: #fff;
float: right;
font-size: 28px;
font-weight: bold;
top: -10px;
position: relative;
}
.close:hover,
.close:focus {
color: rgba(51, 68, 101, 0.95);
text-decoration: none;
cursor: pointer;
}
And here is the code of the javascript of the errors:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("play5");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("play10");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("play20");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("play50");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("play100");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("play250");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("playbutton500");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("play1000");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Thanks for trying to help, and if you have any other questions, feel free to ask!
(This is my first question, so please give me advice on how to improve!)
Aucun commentaire:
Enregistrer un commentaire