How to toggle a specific JavaScript function with a click?

Question

We need to disable and re-enable with a click, a function which shows us the amount of characters within plenty of < pre >.

The function we use is this:

<script type="text/javascript">
$(window).load(function(){
    $(document).ready(function(){
    $('pre').each(function(i){
        var iCharacters = $(this).text().length;
            $(this).prepend("<b style='color:red'>" + iCharacters + " </b>");
        });
    });
});
</script>

Thanks a lot for your help in advance.

First you do not need both $(window).load and $(document).ready , secondly your question is not clear — brk
– brk, Commented Sep 17, 2018 at 16:43
I'm sorry for not been clear enough. This function shows the number of character between a <pre> and a </pre>. It sows this characters in red as prepend to the text of these <pre>. We want to be able to toggle between having or not these red numbers while using our documents, mainly to first choose the appropriate one, and then copy it and paste it easily without these numbers. — rx65m
– rx65m, Commented Sep 17, 2018 at 16:51
I thought about toggle between this code, and other doing nothing, but I believe that is not correct. — rx65m
– rx65m, Commented Sep 17, 2018 at 16:53

Joel Lord · Accepted Answer · 2018-09-17 16:57:11Z

2

I believe an easy way to do this would be to always display the numbers but they hide or show them on the click of a button using jQuery's toggle method. You can find a working example here: https://jsbin.com/pohagaz/1/edit?html,js,output.

$("pre").each(function(i){
  var iCharacters = $(this).text().length;
  $(this).prepend("<b class='charCount' style='color:red'>" + iCharacters + " </b>");
});

$("#showCounts").click(function() {
  $(".charCount").toggle();
});

answered Sep 17, 2018 at 16:57

Joel Lord

2,1831 gold badge18 silver badges26 bronze badges

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

1 Comment

rx65m Over a year ago

WOW! Joel Lord! This is exactly what we need! You really made my day! THANK YOU VERY MUCH! This was my first Question! How do I do to prize your Answer???

Collectives™ on Stack Overflow

How to toggle a specific JavaScript function with a click?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related