All Javascript Functions Working Except my Javascript Typewriter Function

JavaScript
1

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);
});
3

@camperextraordinaire, 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!

5

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

7

I see what you’re saying @camperextraordinaire. 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 });