jQuery click function to display text in another div

Question

I'm currently trying display text in another div after a input button is clicked

$(document).ready(function(){
  $('#excellent').click(function(){
    document.getElementById("voting").innerHTML = "Thank you for rating!";

    setTimeout(fade_out, 3000);

    function fade_out() {
      $("#voting").fadeOut();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="excellent" type="image" src="smile.png" name="image" width="150" height="150">

<div id="footer">
  <p id="voting"></p>
</div>

The message for the innerHTML does appear and fades away, however when I click again on the image input, the text never appears again. How do I make it so that the text will always appear when clicked?

where is element with ID voting please include all relevant code to OP — guradio
– guradio, Commented Aug 16, 2016 at 8:33
Make sure you show the element after adding the text: $('#voting').text('Thank you for rating!').show(); — Phylogenesis
– Phylogenesis, Commented Aug 16, 2016 at 8:34
also its better to move function fade_out() out of click handler. — vijayP
– vijayP, Commented Aug 16, 2016 at 8:35

Sevanteri · Accepted Answer · 2016-08-16 08:45:08Z

1

The element is hidden after .fadeOut() so you need to .show() the element after you have set the text.

You can also combine all that like this.

$(document).ready(function(){
    $('#excellent').click(function() {
        $("#voting").text("Thank you for rating!")
                    .show()
                    .delay(3000)
                    .fadeOut();
    });
});

Your setTimeout usage is correct, but in this simple case I would use the jQuery's .delay() as it is much simpler.

edited Aug 16, 2016 at 8:45

answered Aug 16, 2016 at 8:38

Sevanteri

4,0981 gold badge26 silver badges30 bronze badges

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

Comments

David · Accepted Answer · 2016-08-16 08:34:36Z

1

The element is "faded out", and you never show it again. So you're just setting the text on an invisible element.

When you set the text, also make it visible:

document.getElementById("voting").innerHTML = "Thank you for rating!";
$("#voting").show();

or:

$("#voting").text("Thank you for rating!");
$("#voting").show();

or even:

$("#voting").text("Thank you for rating!").show();

answered Aug 16, 2016 at 8:34

David

221k42 gold badges245 silver badges337 bronze badges

Comments

eisbehr · Accepted Answer · 2016-08-16 08:35:16Z

0

You need to .show() the #voting when using fadeOut. And you should use clearTimeout to prevent fadeOut starting on multiple clicks.

And why mixing plain js and jQuery? It would be easier to just use jQuery here, when you have it available already.

$(function() {
    var timeout;

    $('#excellent').click(function() {
        $("#voting").html("Thank you for rating!").show();

        clearTimeout(timeout);
        timeout = setTimeout(function() {
            $("#voting").fadeOut();
        }, 3000);
    });
});

answered Aug 16, 2016 at 8:35

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Comments

Jack jdeoel · Accepted Answer · 2016-08-16 08:44:18Z

0

.fadeOut() is set html element to display none , so it will never show until changing diplay property. Try something like this (my recommend)

<div id="footer">
    <p id="voting" style="display:none">Thank you for rating</p>
</div>

JS

$(document).ready(function(){
$('#excellent').click(function(){
   $("#voting").fadeIn();
   setTimeout(fade_out, 3000);
   function fade_out() {
        $("#voting").fadeOut();
   }
});
});

answered Aug 16, 2016 at 8:44

Jack jdeoel

4,5886 gold badges28 silver badges57 bronze badges

Collectives™ on Stack Overflow

jQuery click function to display text in another div

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