Uncaught TypeError: Cannot read property 'substr' of undefined

[HauntedSmores]

Description

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;
this.typed_instance.reset();

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

If you instead do:

var textArray = ["string", "string"];
typed.destroy();
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.

Notes

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.

[mattboldt]

Check out this fiddle: https://jsfiddle.net/k7bozouk/

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.

[HauntedSmores]

@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);
	          }
	          _this2.toggleBlinking(true);
	
	          // 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
	          _this2.toggleBlinking(false);
	
	          // 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.typed_instance.reset()

[mattboldt]

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

[satouriko]

@mattboldt This issue does exist. Check it out here. https://jsfiddle.net/jchnx1u9/

[mattboldt]

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.

[campanflaviu]

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.

[belyas]

@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

[mattboldt]

@belyas yeah the docs say to wrap your HTML strings in a parent element: https://github.com/mattboldt/typed.js#strings-from-static-html-seo-friendly

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.