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(); })