在卷轴上创建打字机效果。一部分有效，另一部分无效！JavaScript、HTML、CSS

所以我在我的网站上工作，我在scroll上添加了一个打字机效果，它将在页面的一个部分工作，当我去复制下一部分的代码时，在脚本执行时，它将给出一个错误

这是整个脚本：

<script type="text/javascript">
            $(window).scroll(function() {
                s = $("body").scrollTop();
                h = 150;
                console.log(s);
                if(s>150)
                {
                    text1.ready();
                }
                if(s>600)
                {
                    text2.ready();
                }
            });

            $(document).ready(function(){

            });
            var text1 = {
                counter:0,
                count:0,
                value:"",
                subvalue:"",
                start:0,
                ready:function()
                {

                    if(text1.start==0)
                    {
                        text1.start = 1;
                        data_text = $(".data-text");
                        data_text.css({left:0, opacity:1});
                        text1.counter = $(".data-text").data("text").length-34;
                        console.log(text1.counter);
                        text1.value = $(".data-text").data("text");
                        var str = text1.value;
                        text1.subvalue = str.substr(0,34);
                        data_text.html(text1.subvalue).append('<span class="cursor">|</span>');
                        var text1_engine = setInterval(function(){
                                if(text1.counter>0)
                                {
                                    text1.counter = text1.counter-1;
                                    text1.count = text1.count+1;
                                    text1.subvalue = str.substr(0, 34)+str.substr(34,text1.count);
                                    data_text.html(text1.subvalue).append('<span class="cursor">|</span>');
                                }
                                else
                                {
                                    //text1 = false;
                                    clearInterval(text1_engine);
                                    console.log(1);
                                }
                        }, 50);
                    }
                }

            };
            var text2 = {
                counter:0,
                count:0,
                value:"",
                subvalue:"",
                start:0,
                ready:function()
                {
                    if(text2.start==0)
                    {
                        text2.start = 1;
                        steps_text = $(".steps-text");
                        steps_text.css({left:0, opacity:1});
                        text2.counter = $(".steps-text").data("text").length-34;
                        console.log(text2.counter);
                        text2.value = $(".steps-text").data("text");
                        var str = text2.value;
                        text2.subvalue = str.substr(0,34);
                        steps_text.html(text2.subvalue).append('<span class="cursor">|</span>');
                        var text_engine = setInterval(function(){
                                if(text2.counter>0)
                                {
                                    text2.counter = text2.counter-1;
                                    text2.count = text2.count+1;
                                    text2.subvalue = str.substr(0, 34)+str.substr(34,text2.count);
                                    steps_text.html(text2.subvalue).append('<span class="cursor">|</span>');
                                }
                                else
                                {
                                    //text2 = false;
                                    clearInterval(text2_engine);
                                    console.log(1);
                                }
                        }, 50);
                    }
                }

            };

---

我可以通过将其切换到attr（“CLASS”）或给它自己的标签来解决这个问题：

var text2 = {
                counter:0,
                count:0,
                value:"",
                subvalue:"",
                start:0,
                ready:function()
                {
                    if(text2.start==0)
                    {
                        text2.start = 1;
                        data_stext = $(".data-stext");
                        data_stext.css({left:0, opacity:1});
                        text2.counter = $(".data-stext").data('stext').length-4;
                        console.log(text2.counter);
                        text2.value = $(".data-stext").data('stext');
                        var str = text2.value;
                        text2.subvalue = str.substr(0,4);
                        data_stext.html(text2.subvalue).append('<span class="cursor">|</span>');
                        var text2_engine = setInterval(function(){
                                if(text2.counter>0)
                                {
                                    text2.counter = text2.counter-1;
                                    text2.count = text2.count+1;
                                    text2.subvalue = str.substr(0, 4)+str.substr(4,text2.count);
                                    data_stext.html(text2.subvalue).append('<span class="cursor">|</span>');
                                }
                                else
                                {
                                    //text2 = false;
                                    clearInterval(text2_engine);
                                    console.log(2);
                                }
                        }, 50);
                    }
                }

            };

var text2={
柜台:0,，
计数：0，
值：“”，
子值：“”，
起点：0，
就绪：函数（）
{
如果（text2.start==0）
{
text2.start=1；
data_stext=$（“.data stext”）；
data_stext.css（{左：0，不透明度：1}）；
text2.counter=$（“.data-stext”）.data（'stext'）.length-4；
console.log（text2.counter）；
text2.value=$（“.data-stext”）.data（'stext'）；
var str=text2.value；
text2.subvalue=str.substr（0,4）；
data_stext.html（text2.subvalue）.append（“|”）；
var text2_engine=setInterval（函数（）{
如果（文本2.计数器>0）
{
text2.counter=text2.counter-1；
text2.count=text2.count+1；
text2.subvalue=str.substr（0,4）+str.substr（4,text2.count）；
data_stext.html（text2.subvalue）.append（“|”）；
}
其他的
{
//text2=假；
clearInterval（文本2_引擎）；
控制台日志（2）；
}
}, 50);
}
}
};

并通过：

<h1 class="data-stext" data-stext="How It Works..."></h1>  

我可以知道您收到了什么错误吗？我刚刚添加了错误：

（索引）：140未捕获类型错误：无法读取未定义的属性“length”

请尝试将text2 html更改为

，然后查看是否有效。遇到相同的问题。如果需要，我可以将链接添加到live site。您能给我一个链接以检查输出吗？

(index):140 Uncaught TypeError: Cannot read property 'length' of undefined

var text2 = {
                counter:0,
                count:0,
                value:"",
                subvalue:"",
                start:0,
                ready:function()
                {
                    if(text2.start==0)
                    {
                        text2.start = 1;
                        data_stext = $(".data-stext");
                        data_stext.css({left:0, opacity:1});
                        text2.counter = $(".data-stext").data('stext').length-4;
                        console.log(text2.counter);
                        text2.value = $(".data-stext").data('stext');
                        var str = text2.value;
                        text2.subvalue = str.substr(0,4);
                        data_stext.html(text2.subvalue).append('<span class="cursor">|</span>');
                        var text2_engine = setInterval(function(){
                                if(text2.counter>0)
                                {
                                    text2.counter = text2.counter-1;
                                    text2.count = text2.count+1;
                                    text2.subvalue = str.substr(0, 4)+str.substr(4,text2.count);
                                    data_stext.html(text2.subvalue).append('<span class="cursor">|</span>');
                                }
                                else
                                {
                                    //text2 = false;
                                    clearInterval(text2_engine);
                                    console.log(2);
                                }
                        }, 50);
                    }
                }

            };

<h1 class="data-stext" data-stext="How It Works..."></h1>