CODEWITHSUNDEEP
javascriptjqueryhtmlconfirm
Jason Cheng
Jason Cheng

Reputation: 57

Why are there several alerts popping up at the same time?

I'm trying to make this donut clicker game, which is supposed to be similar to cookie clicker. When you select a item from the shop, a confirm is supposed to pop up to confirm that you want to buy the item. I've made the clicking easier in the code below. (you might want to make the code full screen) My question is, why do the confirm pop ups appear multiple times in a row? In my code, there is only one confirm when you click the item, so I really don't know what causes it.

$(document).ready(function() {
	tacoClick();
});
function tacoClick() {
	//hide the items
	$(".item").hide();
	
	//defining some store items
  var clickBonus1 = {
		price: 6,
		amount: 25,
	};
	var clickBonus2 = {
		price: 75,
		amount: 10,
	};
	var clickBonus5 = {
		price: 150,
		amount: 5,
	};
	var autoClick = {
		price: 500,
		amount: 1,
	};
	var autoBonus1 = {
		price: 700,
		amount: 10,
	};
	var autoBonus2 = {
		price: 1000,
		amount: 10,
	};
	var autoBonus5 = {
		price: 1200,
		amount: 5,
	};
	var laser = {
		price: 2500,
		amount: 1,
	};
	var battery = {
		price: 1500,
		amount: 666,
	};
	var energyPotion = {
		price: 1500,
		amount: 20,
	};
	var key = {
		price: 500000,
		amount: 1,
	};
	
	//defining the player
	var player = {
		clicks: 0,
		money: 5,
		energy: 100,
		items: ["none"],
		clickAmount: 1,
		energyLost: 0.5,
		waitTime: 600000,
	};

	//clicking! YAY :)
	$("#donut").click(function() {
		//adding num clicks, money, and taking away energy
		player.clicks += player.clickAmount;
		player.energy -= player.energyLost;
		player.money += player.clickAmount / 10;

		//showing player status on the status bar
  	document.getElementById("clickNum").innerHTML = player.clicks;
	  document.getElementById("playerEnergy").innerHTML = Math.floor(player.energy);
		document.getElementById("money").innerHTML = Math.floor(player.money);
		
		//tired mode
		if(player.energy < 1 && player.energy > -1) {
			alert("You ran out of energy! You'll have to wait ten more minutes until you can play again!");
			$("body").fadeOut();
			window.setTimeout(function revive() {
				$("body").fadeIn();
				player.energy = 100;
			}, player.waitTime);
		}
		
		//the items! now, it gets really tricky...
  	if(player.money > 6) {
	  	$("#clickBonus1").show();
			$("#clickBonus1").click(function() {
				var confirmBuy = confirm("Do you want to buy this item for $50?");
				if(confirmBuy) {
					if(player.money > 6) {
						player.clickAmount += 1;
						player.money -=2;
						document.getElementById("money").innerHTML = Math.floor(player.money);
					} else {
						alert("You don't have enough money!");
					}
				}			
			});
  	}
	});
}
* {
	font-family: Arial;
	font-weight: bold;
}

#donut {
	height: 500px;
	width: 500px;
	/*background-color: grey;*/
	border-radius: 500px;
}

#donut:hover {
	cursor: pointer;
	width: 505px;
	height: 505px;
	transition: ease 0.3s;
}

body {
	/*border: 1px solid black;*/
	width: 960px;
	text-align: center;
	margin-left: 480px;
	margin-top: 200px;
}

.item:hover {
  cursor: pointer;
	background-color: #EAFFEA;
	transition: ease 0.5s;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
	<script>
	  
	</script>
	<style>
		
	</style>
</head>
<body>
<div id="statusBarWrapper">
  <div id="clickNumWrapper">Total clicks: <span id="clickNum">0</span></div>
	<div id="devicesWrapper">Items: <span id="devices">none</span></div>
	<div id="energyWrapper">Energy: <span id="playerEnergy">100</span></div>
	<div id="moneyWrapper">Money: $<span id="money">5</span></div>
</div>
<div id="tacoWrapper">
	<img id="donut" src="http://cliparts.co/cliparts/LTd/jRj/LTdjRjKpc.png"/>
</div>
<div id="shopWrapper">
  <ul id="shop">
		<div class="item" id="clickBonus1">Click bonus (+1 donut / click) <br/> Price: $50</div>
		<div class="item" id="clickBonus2">Click bonus (+2 donut / click) <br/> Price: $75</div>
		<div class="item" id="clickBonus5">Click bonus (+5 donut / click) <br/> Price: $150</div>
		<div class="item" id="autoClick">Auto Click (automatically +1 / second) <br/>  Price: 500</div>
		<div class="item" id="autoBonus1">Auto Click bonus (+1 donut / second) <br/> Price: $700</div>
		<div class="item" id="autoBonus2">Auto Click bonus (+2 donut / second) <br/> Price: $1000</div>
		<div class="item" id="autoBonus5">Auto Click bonus (+5 donut / click) <br/> Price: $1200</div>
		<div class="item" id="laser">Laser (+50 donut / second) <br/> Price: $2500</div>
		<li class="item" id="battery">Battery (powers laser for 2 minutes) <br/> Price: $1500</div>
		<div class="item" id="energyPotion">Energy Potion (shortens waiting time by 30 seconds) <br/> Price: $2500</div>
		<div class="item" id="key">??????</div>
	</ul>
</div>
</body>
</html>

Upvotes: 0

Views: 669

Answers (1)

Andrew Kirchmyer
Andrew Kirchmyer

Reputation: 422

The code could use some refactoring, but with that said, I think I know what might be happening. You are binding a click handler to #donut. Every time #donut is clicked, the handler is called. The handler binds a click handler to #clickBonus1 every time it is called. So if the #donut click handler is called multiple times, multiple handlers are applied to #clickBonus1, which will all be called when #clickBonus1 is clicked, causing multiple alerts.

Upvotes: 1

Related Questions