jquery - javascript .hide on click event trouble -

<header data-role="header">     <h1> tea time </h1>     <a href="#home" class="ui-btn ui-btn-icon-top ui-icon-back ui-btn-icon-notext">back</a> </header> <h1>takes 3 minutes</h1> <p id="timedisp">120 sec</p> <div class="clock">  </div>  <a href="#" id="start">start</a> <a href="#" id="reset">reset</a>  </section> 

the below html controls timer

function greentea(){ 

set duration var duration = 120;

insert duration div class of clock     $(".clock").html(duration + " sec");     create countdown interval      var countdown = setinterval(function () {          // subtract 1 duration , test see         // if duration still above 0         if (--duration) {             // update clocks's message             $(".clock").html(duration + " sec");         // otherwise         } else {               // clear countdown interval             clearinterval(countdown);             // set completed message             $(".clock").html("end steep");            }      // run interval every 1000ms      }, 1000);  };   $("a#start").click(greentea)  why below not working? trying p#timedisp disappear when click a#start link.  $("p#timedisp").hide(("a#start").click());   $('#reset').click(function() {     location.reload(); }); 

your jquery should be:

$('#start').click(function(){     $('#timedisp').hide(); })