CODEWITHSUNDEEP
javascriptjquery
SuperCodeBrah
SuperCodeBrah

Reputation: 3134

JQuery hide() not working after show() and vice versa

Variations of this question have been asked but it appears that most were solved using the toggle() method. My scenario is different in that the hide() and show() should be driven by two different events, the creation of a new game and when the game is won. I don't want each event to do only one thing, so toggle() would not be appropriate.

I'm using socket.io to communicate between the server and browser. Everything loads appropriately to begin. The issue is with trying to start a new game after the previous game has been won. The relevant JavaScript looks something like this:

$(document).ready(function() {
   socket.on('gameOver', function() {
      $('.yourStatus').hide(700);
      $('.winner').show(700);
   });
   $('button.newGame').on('click', function() {
      $('.winner').hide;
      $('.yourStatus').show;
   });
});

Everything works as it should when the game ends via the socket.io event. Everything else within the button click event function works properly except for hide() and show().

I'm sure the answer to this will be embarrassingly simple.

Upvotes: 1

Views: 1000

Answers (1)

Marek Woźniak
Marek Woźniak

Reputation: 1776

you should use brackets (invoke the function):

$(document).ready(function() {
   socket.on('gameOver', function() {
      $('.yourStatus').hide(700);
      $('.winner').show(700);
   });
   $('button.newGame').on('click', function() {
      $('.winner').hide();
      $('.yourStatus').show();
   });
});

Performance tip (of cource if it is possible - element could be unique in DOM):

better if you declare your '.winner' with hash. For example: <div id="winner"/> and use in separator jQuery: $("#winner")

Upvotes: 1

Related Questions