Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught TypeError: Cannot read property 'substr' of undefined #283

HauntedSmores opened this issue Jul 14, 2017 · 8 comments


Copy link

@HauntedSmores HauntedSmores commented Jul 14, 2017


When setting the strings property of a Typed instance to an array with length greater than 0 and resetting the instance with Typed.reset(); the following error occures:this.typed_instance.strings = new_text;

Uncaught TypeError: Cannot read property 'substr' of undefined
    at eval (typed.js?d97d:230)

If you instead do:

var textArray = ["string", "string"];
typed = new Typed('#control_panel_text span.paragraph', { strings: textArray });

it works fine.

Steps to Reproduce

var textArray = ["string", "string"];
typed.strings = textArray;
typed.reset(); // also tried passing true as argument

Expected behavior: resets the string array with a new one and properly progresses through a multimember array without throwing the error using the reset() method.


Im just trying to update the same instance with new text arrays. Maybe the reset method wasnt meant for that and destroying the instance is correct.


This comment has been minimized.

Copy link

@mattboldt mattboldt commented Jul 14, 2017

Check out this fiddle:

I think it's following what you want to do, and I'm not getting any errors.
Try and make a fiddle of your code to see if there are any differences. Also, make sure you're using the latest version.


This comment has been minimized.

Copy link

@HauntedSmores HauntedSmores commented Jul 14, 2017

@mattboldt I ran npm install typed.js@latest --save and Im still seeing the issue. Clearly your fiddle works so Im scratching my head.

If it helps, that error is pointing to line 230 which is in this block:

// contain typing function in a timeout humanize'd delay
	      this.timeout = setTimeout(function () {
	        // check for an escape character before a pause value
	        // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^
	        // single ^ are removed from string
	        var pauseTime = 0;
	        var substr = curString.substr(curStrPos);
	        if (substr.charAt(0) === '^') {
	          var skip = 1; // skip atleast 1
	          if (/^\^\d+/.test(substr)) {
	            substr = /\d+/.exec(substr)[0];
	            skip += substr.length;
	            pauseTime = parseInt(substr);
	            _this2.temporaryPause = true;
	            _this2.options.onTypingPaused(_this2.arrayPos, _this2);
	          // strip out the escape character and pause value so they're not printed
	          curString = curString.substring(0, curStrPos) + curString.substring(curStrPos + skip);
	        curStrPos = _htmlParserJs.htmlParser.typeHtmlChars(curString, curStrPos, _this2);
	        // timeout for any pause after a character
	        _this2.timeout = setTimeout(function () {
	          // Accounts for blinking while paused
	          // We're done with this sentence!
	          if (curStrPos === curString.length) {
	            _this2.doneTyping(curString, curStrPos);
	          } else {
	            _this2.keepTyping(curString, curStrPos);
	          // end of character pause
	          if (_this2.temporaryPause) {
	            _this2.temporaryPause = false;
	            _this2.options.onTypingResumed(_this2.arrayPos, _this2);
	        }, pauseTime);
	        // humanized value for typing
	      }, humanize);

Im using it in a vue.js app and tested like so:

// Top of component
import Typed from 'typed.js';

// In data() method
typed_instance = null;

// In the mounted() hook
this.typed_instance.strings = ['Testing a lot of stuff', 'wow much testing'];

This comment has been minimized.

Copy link

@mattboldt mattboldt commented Jan 22, 2018

closing for inactivity. let me know if this issue still exists

@mattboldt mattboldt closed this Jan 22, 2018

This comment has been minimized.

Copy link

@rikakomoe rikakomoe commented Jun 8, 2018

@mattboldt This issue does exist. Check it out here.

@mattboldt mattboldt reopened this Jun 13, 2018

This comment has been minimized.

Copy link

@mattboldt mattboldt commented Jun 13, 2018

The only difference I can see right now between mine and @rikakomoe's fiddle is that the initial strings array only has 1 item in it. I'll investigate further.


This comment has been minimized.

Copy link

@campanflaviu campanflaviu commented Sep 11, 2018

Also got this error while using stringsElement option when the element doesn't have any other child elements. So I had to wrap the text in a span and the span wrapped inside the stringsElement element.


This comment has been minimized.

Copy link

@belyas belyas commented Dec 12, 2018

@mattboldt This issue is still occurring actually, you need to wrap the stringsElement property's text within another html tag such: span, div... in order to have the animation starts, otherwise if the text is within only one html tag, it does't work and throws an error, I'm using version v2.0.9


This comment has been minimized.

Copy link

@mattboldt mattboldt commented Dec 12, 2018

@belyas yeah the docs say to wrap your HTML strings in a parent element:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
None yet
5 participants
You can’t perform that action at this time.