lemminkainen lemminkainen - 5 months ago 11
Javascript Question

jQuery doesn't handle -some- button click events

I'm trying to make a simple text-based game using jQuery. There are some locations, player can move there by pressing buttons (simply showing/hiding corresponding HTML divs). While I can move to location "Arena" and back to location "House" freely, I can't go back from location "Shop" anywhere, but code looks ok for me.

fiddle: https://jsfiddle.net/qyg5twoL/



$(document).ready(function(){
var loc="house";

$('#house').css('display','');
$('#shop').css('display','none');
$('#arena').css('display','none');

$('#gt-arena').click(function(){
loc='arena';
$('#arena').css('display','');
$('#shop').css('display','none');
$('#house').css('display','none');
});

$('#gt-house').click(function(){
alert('house');
loc='house';
$('#house').css('display','');
$('#shop').css('display','none');
$('#arena').css('display','none');
});

$('#gt-shop').click(function(){
alert('shop');
loc='shop';
$('#house').css('display','none');
$('#shop').css('display','');
$('#arena').css('display','none');
});

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>jquery problem</title>

<div id="house">
<h1>Your house</h1>
<p>This is your house</p>
<button id="gt-arena">Go to Arena</button>
<button id="gt-shop">Go to Shop</button>
</div>

<div id="arena">
<h1>Arena</h1>
<p>This is the Arena</p>
<button id="fight">Fight</button>
<button id="gt-house">Leave Arena</button>
<button id="gt-shop">Go to Shop</button>
</div>

<div id="shop">
<h1>Shop</h1>
<p>For all your shopping needs</p>
<button id="buy-knife">Buy knife</button>
<button id="gt-arena">Go to Arena</button>
<button id="gt-house">Go to House</button>
</div>




Answer

Problem Statement

The problem lies with id selector. You have assigned same id to multiple elements. id is the identification of the element and should be unique. And when added for more than one element, event is binded only with 1 element and ignored for other. That is why once navigated to house you are not able to come back.

Solution

In place of id use class selector.

 $(document).ready(function() {
   var loc = "house";

   $('#house').css('display', '');
   $('#shop').css('display', 'none');
   $('#arena').css('display', 'none');

   $('.gt-arena').click(function() {
     loc = 'arena';
     $('#arena').css('display', '');
     $('#shop').css('display', 'none');
     $('#house').css('display', 'none');
   });

   $('.gt-house').click(function() {
     alert('house');
     loc = 'house';
     $('#house').css('display', '');
     $('#shop').css('display', 'none');
     $('#arena').css('display', 'none');
   });

   $('.gt-shop').click(function() {
     alert('shop');
     loc = 'shop';
     $('#house').css('display', 'none');
     $('#shop').css('display', '');
     $('#arena').css('display', 'none');
   });

 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<title>jquery problem</title>

<div id="house">
  <h1>Your house</h1>
  <p>This is your house</p>
  <button class="gt-arena">Go to Arena</button>
  <button class="gt-shop">Go to Shop</button>
</div>

<div id="arena">
  <h1>Arena</h1>
  <p>This is the Arena</p>
  <button id="fight">Fight</button>
  <button class="gt-house">Leave Arena</button>
  <button class="gt-shop">Go to Shop</button>
</div>

<div id="shop">
  <h1>Shop</h1>
  <p>For all your shopping needs</p>
  <button id="buy-knife">Buy knife</button>
  <button class="gt-arena">Go to Arena</button>
  <button class="gt-house">Go to House</button>
</div>

Comments