javascript .hide on click event trouble

Question

<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 is the html that controls my timer

function greenTea(){

Set The Duration var duration = 120;

Insert the duration into the div with a class of clock
    $(".clock").html(duration + " sec");  


Create a countdown interval

    var countdown = setInterval(function () {

        // subtract one from duration and test to see
        // if duration is still above zero
        if (--duration) {
            // Update the clocks's message
            $(".clock").html(duration + " sec");
        // Otherwise
        } else {

             // Clear the countdown interval
            clearInterval(countdown);
            // set a completed message
            $(".clock").html("End Your Steep");  

        }

    // Run interval every 1000ms 
    }, 1000);

};


$("a#start").click(greenTea)

Why is the below not working? I am trying to get my p#timedisp to disappear when I click the a#start link.

$("p#timedisp").hide(("a#start").click()); 

$('#reset').click(function() {
    location.reload();
});

More details about your HTML, JS is necessary to answer this question. Please read our Help section on how to create an MCVE (stackoverflow.com/help/mcve) and add it to your question. You will get faster, better help from the community that way. — blurfus
– blurfus, Commented Apr 10, 2015 at 1:36

j08691 · Accepted Answer · 2015-04-10 01:38:52Z

1

Your jQuery should be:

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

answered Apr 10, 2015 at 1:38

j08691

208k33 gold badges269 silver badges281 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

blurfus · Accepted Answer · 2015-04-10 01:39:10Z

0

You can use something along the lines of this:

$(function() {
  $("p#timedisp").on('click', function() {
    //$("a#start").hide();

    alert('do hide');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="timedisp">120 Sec</p>

answered Apr 10, 2015 at 1:39

blurfus

14.1k9 gold badges63 silver badges69 bronze badges

Comments

Roko C. Buljan · Accepted Answer · 2015-04-10 01:40:21Z

0

IF you included jQuery library this should work

<a id="start" href="#">CLICK ME</a>
<p id="timedisp">120 Sec</p>


<script>
$(function() { // DOM is now ready

    $("#start").click(function( event ) {
        event.preventDefault(); // Prevent default anchor behavior
        $("#timedisp").hide(); 
    });

});
</script>

answered Apr 10, 2015 at 1:40

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

Comments

meteor · Accepted Answer · 2015-04-10 01:40:50Z

0

This would work

 $('#start').on("click",function(){
     document.getElementById('timedisp').style.display = 'none';
      //post code
    })

answered Apr 10, 2015 at 1:40

meteor

2,5784 gold badges40 silver badges59 bronze badges

Collectives™ on Stack Overflow

javascript .hide on click event trouble

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related