All Javascript Functions Working Except my Javascript Typewriter Function

Hi folks!

I’m having a little javascript issue…thanks in advance for your help!
On my Code Pen link at https://codepen.io/IDCoder/pen/LrQRrw?editors=0010, all my javascript functions work, but at my Github link at https://mtzioncode.github.io, the javascript Typewrite function won’t work.

In my Code Pen I start of my code like this:

document.addEventListener('DOMContentLoaded',function(event){

In my Github, I start off my code like this:

$(document).ready(function () {
	
document.addEventListener('DOMContentLoaded',function(event){

Here’s my Code Pen javascript code:

document.addEventListener('DOMContentLoaded',function(event){
  // array with texts to type in typewriter
  var dataText = [ "Devoted to the design of experiences with code."];
  
  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
    document.getElementById("one").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 700);
    }
  }
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
          StartTextAnimation(0);
        }, 20000);
     }
     // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
     typeWriter(dataText[i], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation(i + 1);
     });
    }
  }
  // start the text animation
  StartTextAnimation(0);
});

And here is my Github code:

$(document).ready(function () {
	
document.addEventListener('DOMContentLoaded',function(event){
  // array with texts to type in typewriter
  var dataText = [ "Devoted to the design of experiences with code."];
  
  // type one text in the typwriter
  // keeps calling itself until the text is finished
  function typeWriter(text, i, fnCallback) {
    // chekc if text isn't finished yet
    if (i < (text.length)) {
      // add next character to h1
    document.getElementById("one").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';

      // wait for a while and call this function again for next character
      setTimeout(function() {
        typeWriter(text, i + 1, fnCallback)
      }, 100);
    }
    // text finished, call callback if there is a callback function
    else if (typeof fnCallback == 'function') {
      // call callback after timeout
      setTimeout(fnCallback, 700);
    }
  }
  // start a typewriter animation for a text in the dataText array
   function StartTextAnimation(i) {
     if (typeof dataText[i] == 'undefined'){
        setTimeout(function() {
          StartTextAnimation(0);
        }, 20000);
     }
     // check if dataText[i] exists
    if (i < dataText[i].length) {
      // text exists! start typewriter animation
     typeWriter(dataText[i], 0, function(){
       // after callback (and whole text has been animated), start next text
       StartTextAnimation(i + 1);
     });
    }
  }
  // start the text animation
  StartTextAnimation(0);
});

I must be missing something. Can you please describe in detail what difference we should see happening between the two versions (Codepen vs. Github)? Once I understand what I am looking for, it will be easier to see what the issue might be.

@RandellDawson, so sorry man, I forgot to add this:

In the Code Pen link (https://codepen.io/IDCoder/pen/LrQRrw?editors=0010), the red text “Devoted to the design of experiences with code.” auto-types via the javascript typewriter function. In my Github link (https://mtzioncode.github.io), the javascript typewriter function ceases to work, and this sentence, “Devoted to the design of experiences with code.” doesn’t auto-type. Thanks for your help!

Your code is different between the two versions. The difference is your github version wraps all of the code present in your Codepen version inside the following:

$(document).ready(function () {
 // your Codepen code is here
});

@RandellDawson oh ok. But isn’t it necessary to wrap all the code like this: $(document).ready(function () { // your Codepen code is here });
??

Yes, but then the the following becomes redundant and interferes with your code working as expected.

document.addEventListener('DOMContentLoaded',function(event){

});

comment out beginning and ending lines above and keep the code in the middle and keep the $(document).ready(function () { … }); wrapped around everything and it should work as expected in your gitbhub.

I see what you’re saying @RandellDawson. I figured that was the issue too. But my wonder, is why does it work in Code Pen, because they have docuent ready built-in I believe? The reason why I added

document.addEventListener('DOMContentLoaded',function(event){

});

was to enable the typeWriter function to begin as soon as the page loads, unless that can also be accomplished, by default with $(document).ready(function () { // your Codepen code is here });

That is exactly what it does.

1 Like