Getting 'undefined' when using inline script in combination with the script.js file

[luuktimmermans]

Hi,

I'm using the following javascript plugin for a typewriter effect: https://github.com/tameemsafi/typewriterjs.

I've done everything as explained in the docs, but I'd like to use the typewriter.typestring.... part inline in a file. When doing this I get Uncaught ReferenceError: typewriter is not defined. This is due to the fact that the script.js gets added to the footer, so that means this gets loaded after the inline script. Is there a way to fix this? I need to use the script inline since I'm using ACF to get values that I'm using in the plugin.

[gregsullivan]

Hi Luuk—Thanks for posting this, and sorry for the delay in responding! I was out sick last week.

I'll need a few more details about how you're trying to use the script. But from a high level, I'd expect something like this in your script.js file:

import Typewriter from 'typewriter-effect/dist/core';

var app = document.getElementById('app');

window.typewriter = new Typewriter(app, {
  loop: true,
  delay: 75,
});

I'm assuming you're trying to put something like this in a template:

window.typewriter
  .pauseFor(2500)
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .deleteChars(10)
  .typeString('<strong>JS</strong> plugin for a cool typewriter effect and ')
  .typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
  .pauseFor(1000)
  .start();

If that's the case, you'll need to have the JavaScript in the template only run after script.min.js has loaded. There are a number of potential approaches here. I believe you should be able to add an onload attribute to the script tag loading script.min.js, and then have that fire a function that runs the typewriter code.

You could also put a check for the existence of window.typewriter in a setInterval block, checking every, say, 100ms, and then running your code once the variable exists.

There are probably other ways this could be done! Those are two off the top of my head. The fundamental problem is, as you guessed, that you need to make sure script.min.js has loaded before your inline JavaScript attempts to run.

[luuktimmermans]

Hi there,

First of all, glad you’re feeling well again.

Let me elaborate a bit more. I indeed have the defaults for Typewriter setup in my script.js file. The reason I’m using the other part of the code in a template is due to the fact that I run php to get values within this script.

I get the second solution you posted, but could you explain the first one a bit more? How would I set this up?

Another question, I assume adding Typewriter to window is required?

Thanks again!

[gregsullivan]

I get the second solution you posted, but could you explain the first one a bit more? How would I set this up?

If you had a script tag that looked like this:

<script src="path/to/external.js" defer onload="executeInlineScript();"></script>

It should trigger the following after it loads:

<script>
	function executeInlineScript() {
		console.log('External script has loaded, and inline script is executing.');
	}
</script>

It occurs to me that another version of this would be to create a function in an inline script tag, check for its existence in script.js, and then run it (when present) from script.js. That might be cleanest, really.

Another question, I assume adding Typewriter to window is required?

In script.js, you need to add variables to the window context if you want to use them outside of script.js. Your inline script doesn't need to reference them with the window. prefix assuming your code is already running in that context, but I generally feel like it doesn't hurt to be specific.

[luuktimmermans]

Thanks again!

Could you elaborate more on the solution you’re suggesting is the cleanest? How would this look, knowing that my default Typewriter stuff is in the script.js file, and the rest in a template file.

[gregsullivan]

No problem!

At it's most basic, I think the thing you should do is:

• Put either a function or JavaScript object in your template, probably by injecting it into wp_footer.
• If it's a function, check for its existence and then execute it. If it's an object, check for its existence and then use its contents to perform your action.

So if we had this being output in your HTML:

<script>
	function executeInlineScript() {
		console.log('External script has loaded, and inline script is executing.');
	}
</script>

You could put something like this in your script.js file:

if ('function' === typeof window.executeInlineScript) { 
	window.executeInlineScript();
}

Then you just need to make sure the function has been defined before script.js is loaded.