I'm trying to make a click counter for a game I'm making, however for some reason 2 buttons render instead of 1. I'm trying to make one single button have 2 main functions, that being move() and onClick(). But obviously, I'm not doing something right. (designed for internet explorer)
"It looks like your post is mostly code; please add some more details." :(
here is the code:
<!DOCTYPE html>
<!--Pringle Clicker 1.0-->
<!--The DP (Depletion Bar) code was origionally from w3schools.com, however it has been heavily modified-->
<html>
<head>
<title>Pringle Clicker v1.0</title>
<style> html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #9898ff;
opacity: 0.8;
background-image: linear-gradient(to right, #4349c2, #4349c2 25px, #5e5eff 25px, #5e5eff );
background-size: 50px 100%;
}
.PringleButton {
background-color: #FFEA00; /* Pringle Color */
border: 5px solid black;
color: black; /* Text Color */
padding: 86px 52px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 32px;
border-radius: 100%;
cursor: copy;
}
.PringleButton:hover {background-color: rgba(236, 236, 57, 0.667)}
.PringleButton:active {
background-color: rgba(236, 236, 57, 0.667);
transform: scale(0.9, 0.9);
}
.DPbar {
position: absolute;
bottom: 200px;
left: 725px;
border: 2px solid black;
background-color: seagreen;
border-radius: 25%;
cursor: not-allowed;
}
</style>
</head>
<body>
<!--button and depletion bar functionality-->
<!--TO DO: 1: Make DP bar length shorter center it (DONE 1/2)
2: DP bar total percentage = 100% (DONE...kinda...)
3: Tweak depletion speed (DONE)
4: DP bar does not push pringle button (DONE)
5: Clicking multiple times does not clone the DP bar (DONE)-->
<div id="DPbar" style="width:0%">0%</div> <!-- Starting percentage of depletion bar-->
<br>
<button onclick="move()">Pringle!</button>
<button onClick="onClick()">Pringle!</button>
<script>
var clicks = 0;
var id = undefined; // --> MOVED ID OUTSIDE
function move() {
var elem = document.getElementById("DPbar");
var width = 0; // Starting percentage
if (id) { // --> CLEAR ID IF EXISTS
clearInterval(id);
}
function frame() {
if (width >= 15) { // Length of depletion bar (ending percentage)
clearInterval(id);
alert("You Lose, reload (Ctrl R) the page to play again!"); // Message displays after hitting 100% (or whatever is the final percentage)
} else {
width ;
elem.style.width = width '%'; // Speed of depletion bar also (idk?)
elem.innerHTML = width * 6.7 '%'; // Multiplier of percentage
}
}
id = setInterval(frame, 75); // Speed of depletion bar
}
function onClick() {
clicks = 1;
document.getElementById("clicks").innerHTML = clicks;
};
</script>
<p>Clicks: <a id="clicks">0</a></p>
</body>
</html>
CodePudding user response：
Just call 2 different functions with onclick(call1(); call2()). You don't have to write everything in one function.
function clickMe() {
document.getElementById("demo").innerHTML = "YOU CLICKED ME!";
}
function andMe() {
document.getElementById("demo").innerHTML = " AND ME!";
}span {
margin: 3rem;
background: #fdc23e;
padding: .5rem 1rem;
border-radius: .5rem;
color: #fff;
}<span onclick="clickMe(); andMe()">Click me.</span>
<p id="demo">Not clicked</p>CodePudding user response：
<!DOCTYPE html>
<!--Pringle Clicker 1.0-->
<!--The DP (Depletion Bar) code was origionally from w3schools.com, however it has been heavily modified-->
<html>
<head>
<title>Pringle Clicker v1.0</title>
<style> html, body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
background-color: #9898ff;
opacity: 0.8;
background-image: linear-gradient(to right, #4349c2, #4349c2 25px, #5e5eff 25px, #5e5eff );
background-size: 50px 100%;
}
.PringleButton {
background-color: #FFEA00; /* Pringle Color */
border: 5px solid black;
color: black; /* Text Color */
padding: 86px 52px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 32px;
border-radius: 100%;
cursor: copy;
}
.PringleButton:hover {background-color: rgba(236, 236, 57, 0.667)}
.PringleButton:active {
background-color: rgba(236, 236, 57, 0.667);
transform: scale(0.9, 0.9);
}
.DPbar {
position: absolute;
bottom: 200px;
left: 725px;
border: 2px solid black;
background-color: seagreen;
border-radius: 25%;
cursor: not-allowed;
}
</style>
</head>
<body>
<!--button and depletion bar functionality-->
<!--TO DO: 1: Make DP bar length shorter center it (DONE 1/2)
2: DP bar total percentage = 100% (DONE...kinda...)
3: Tweak depletion speed (DONE)
4: DP bar does not push pringle button (DONE)
5: Clicking multiple times does not clone the DP bar (DONE)-->
<div id="DPbar" style="width:0%">0%</div> <!-- Starting percentage of depletion bar-->
<br>
<button onclick="doBoth()">Pringle!</button>
<script>
var clicks = 0;
var id = undefined; // --> MOVED ID OUTSIDE
function move() {
var elem = document.getElementById("DPbar");
var width = 0; // Starting percentage
if (id) { // --> CLEAR ID IF EXISTS
clearInterval(id);
}
function frame() {
if (width >= 15) { // Length of depletion bar (ending percentage)
clearInterval(id);
alert("You Lose, reload (Ctrl R) the page to play again!"); // Message displays after hitting 100% (or whatever is the final percentage)
} else {
width ;
elem.style.width = width '%'; // Speed of depletion bar also (idk?)
elem.innerHTML = width * 6.7 '%'; // Multiplier of percentage
}
}
id = setInterval(frame, 75); // Speed of depletion bar
}
function onClick() {
clicks = 1;
document.getElementById("clicks").innerHTML = clicks;
};
function doBoth() {
onClick();
move();
};
</script>
<p>Clicks: <a id="clicks">0</a></p>
</body>
</html>You can have a root function that calls your other 2 functions. This results in one button calling both your function (one after the other)