我正在使用可再现打字机效果的代码来学习html / css / js中的动画。一切正常,但是我在控制台上不断收到此错误:
**script.js:33 Uncaught TypeError: Cannot read property 'length' of undefined
at StartTextAnimation (script.js:33)
at script.js:37**
我尝试了一些在Google上找到的解决方案,但没有任何效果。在我的console.log(dataText)中,数组中的每个字符串都正确执行。该错误在执行循环的那一刻出现。
这是我现在正在处理的代码:
document.addEventListener('DOMContentLoaded', function(event) {
// array with texts to type in typewriter
var dataText = ["Cyber", "Sapa", "Synth", "CYBER // SAPA // SYNTH // TÔRTA // POMBADEV.2020"];
// 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 h2
document.querySelector("h2").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);
}, 5000);
}
// 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);
});
如果有人可以帮助我,我将不胜感激!
PS。Codepen链接:https://codepen.io/iMorettini/pen/rNMOvZK
也许那dataText[i].length
应该是dataText.length
你的line 33
。因为您正在检查单词,而不是单词中的字母。
如果您可以发布项目或类似内容的代码笔将很有帮助。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句