CODEWITHSUNDEEP
javascripthtmlanimation
Zac Jacob
Zac Jacob

Reputation: 82

Javascript Callback function malfunction

I am trying to implement an anonymous callback function. The code here I wrote is janky I know.

Typing intro is a span, it activates the .typed animation with the given parameters. What I need to activate, and what isn't, is the last function to remove the two elements by id there. Can't figure out how. 

<!-- Executes intro typing text -->
<script>
  document.getElementById('intro-button').onclick = function() {
    $(function() {
      $("#typing-intro").typed({
             strings: ["&emsp;INITSEG  = DEF_INITSEG</br>&emsp;SYSSEG"],
             typeSpeed: 0,
             backDelay: 20,
             loop: false,
             loopCount: false,
        }, function (){
           document.getElementById("intro-section").remove();
           document.getElementById("typing-intro").remove();
        });
      });
    }
    ///script
</script>

Upvotes: 0

Views: 63

Answers (2)

Alex
Alex

Reputation: 1583

As MinusFour points out, the typed animation function doesn't take a callback function as the final parameter. Instead a "callback" function is passed to it through the options

Beyond the question, there's a lot you can clean up with the code. Since you're using jQuery already, you can clean up the event handler. Instead of document.getElementById('intro-button').onclick = function() { ... } you can have $('#intro-button').click(function() { ... });. If you are placing this <script> in the <head>, you will want to wrap the entire thing in in $(function() { ... }), not have in stuck in the middle of your code.

Finally, since you're using jQuery everywhere else, instead of document.getElementById("intro-section").remove(); just have $('#intro-section').remove().

So it would like this:

$(function() {
    $('#intro-button').click(function() {
          $("#typing-intro").typed({
             strings: ["&emsp;INITSEG  = DEF_INITSEG</br>&emsp;SYSSEG"],
             typeSpeed: 0,
             backDelay: 20,
             loop: false,
             loopCount: false,
             callback: function (){
                $("#intro-section").remove();
                $("#typing-intro").remove();
             }
        });
    })
})

Upvotes: 1

MinusFour
MinusFour

Reputation: 14423

typed.js doesn't really handle the callback as a separate argument. The method it extends on the jQuery prototype is:

$.fn.typed = function(option) {

So you'll have to pass it as part of the callback key of your options object.

$("#typing-intro").typed({
             strings: ["&emsp;INITSEG  = DEF_INITSEG</br>&emsp;SYSSEG"],
             typeSpeed: 0,
             backDelay: 20,
             loop: false,
             loopCount: false,
             callback: function (){
                document.getElementById("intro-section").remove();
                document.getElementById("typing-intro").remove();
             }
        });
      });

There's also no remove method for the DOMElement, it's a jquery thing.

$('#intro-section').remove();
$('#typing-intro').remove();

Upvotes: 1

Related Questions