CODEWITHSUNDEEP
javascriptjquery
chlc
chlc

Reputation: 49

implementing .hide() and .show() issue, both divs being shown, with no change onbutton click

Essentially creating a trivia game and having issues implementing jQuery .hide() and .show() functions. I've been reviewing other questions here on SO and my code looks correct, so I'm confused as to why all my divs are still visible, with no response from button clicks. I've tried to condense my code by leaving out the details the divs I'm trying to hide and show, just to focus on that current problem. I just left out the actual question data and timer function. 

//Problematic functions
$( document ).ready(function(){

$("#mainbox").hide();

$("#beginning").click(function(){

$("#begin").hide();
  $("#mainbox").show();
  startTime();

})

Divs I'm trying to hide

<div id="begin" class="unhidden">
    <h1>Trivia Game</h1>
    <h2>Don't run out of time!</h2>
    <p>
    <button id="beginning">Start</button>
    </p>
    <br>
</div>  
    <div id = "mainbox" class="hidden">

    <h2>Answer the following:</h2>
    <h2 id="timer">Remaining Time: </h2>
</div>

Is it a scope / ordering issue?

Upvotes: 0

Views: 59

Answers (1)

Soviut
Soviut

Reputation: 91585

You're missing a set of closing braces. You're closing your click event handler function, but not your ready function.

Here is an example of your code running with the additional closing brace. Make sure you write your code cleanly and indent properly to make these kind of typos easier to notice. Also, run you code through a validator or "linter" to make sure the code you've written is free of errors.

$(function() {
  $("#mainbox").hide();
  
  $("#beginning").on('click', function(){
    $("#begin").hide();
    $("#mainbox").show();
    startTime();
  }); // close click handler
}); // close ready
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="begin" class="unhidden">
  <h1>Trivia Game</h1>
  <h2>Don't run out of time!</h2>
  <p>
    <button id="beginning">Start</button>
  </p>
</div>  

<div id="mainbox" class="hidden">
  <h2>Answer the following:</h2>
  <h2 id="timer">Remaining Time: </h2>
</div>

Also note that you don't need $(document).ready(function() { ... }); anymore. The equivalent is simply $(function() { ... });. Additionally, you should use .on() to create event handlers.

Upvotes: 1

Related Questions