Javascript 单击事件处理程序中的SetInterval方法

我不知道这个代码哪里出了问题

我要找的是：

    // group all functions so that we can call the one 
    // corresponding to the clicked tab
    var fns = [writeMe, writeMe1, writeMe2, writeMe3];

    var tellMe = null;
    var li = document.getElementsByTagName("li");

    // need to use `let` here to avoid IIFE
    for (let i = 0; i < li.length; i++) {
        li[i].addEventListener("click", function (e) {
            clearInterval(tellMe);
            for (let j = 0; j < li.length; j++) {
                li[j].style.backgroundColor = "";
            }
            this.style.backgroundColor = "yellow";
            tellMe = setInterval(fns[i], 1000);
            e.stopPropagation();
        });
    }

单击动画开始和再次单击动画停止时的选项卡列表。我打算用setInterval来做（只是为了练习）

以下是我尝试使用的代码：

function writeMe() {
    var p = document.createElement("p");
    p.innerHTML = "List 1";
    var ilu = document.getElementById("ilu");
    ilu.appendChild(p);
        if (ilu.getElementsByTagName("p").length === 5) {
            ilu.innerHTML = "";
        }
}
    var li = document.getElementsByTagName("li");
    for(i=0;i<li.length;i++) {
        li[i].addEventListener("click", function(e) {
            if (this.style.backgroundColor == "yellow") {
                this.style.backgroundColor = "";
                clearInterval(writeMe);
            } else {
                for(i=0;i<li.length;i++) {
                    li[i].style.backgroundColor = "";
                }
                this.style.backgroundColor = "yellow";
                var writeMe = setInterval(writeMe, 1000);
                writeMe();
              }
        e.stopPropagation();
        });
    }

函数writeMe（）{
var p=document.createElement（“p”）；
p、 innerHTML=“列表1”；
var ilu=document.getElementById（“ilu”）；
依附儿童（p）；
if（ilu.getElementsByTagName（“p”）.length==5）{
ilu.innerHTML=“”；
}
}
var li=document.getElementsByTagName（“li”）；
对于（i=0；i这是您可能正在寻找的：

    // group all functions so that we can call the one 
    // corresponding to the clicked tab
    var fns = [writeMe, writeMe1, writeMe2, writeMe3];

    var tellMe = null;
    var li = document.getElementsByTagName("li");

    // need to use `let` here to avoid IIFE
    for (let i = 0; i < li.length; i++) {
        li[i].addEventListener("click", function (e) {
            clearInterval(tellMe);
            for (let j = 0; j < li.length; j++) {
                li[j].style.backgroundColor = "";
            }
            this.style.backgroundColor = "yellow";
            tellMe = setInterval(fns[i], 1000);
            e.stopPropagation();
        });
    }

//将所有函数分组，以便调用
//对应于单击的选项卡
var fns=[writeMe，writeMe1，writeMe2，writeMe3]；
var-tellMe=null；
var li=document.getElementsByTagName（“li”）；
//需要在这里使用“let”来避免生命
for（设i=0；i



JS-Bin
.web_图像{
显示：块；
文本对齐：居中；
}
.下一张图片{
显示：无；
文本对齐：居中；
}
保险商实验室{
背景色：#a9b9c9；
文本对齐：左对齐；
保证金：0；
填充：0；
}
李{
列表样式类型：无；
显示：内联块；
填充：20px；
边框：1px纯红；
}
标题1
原始餐厅

清单1
清单2
清单3
清单4
清单5

（功能（）{
//var writeMe1=setInterval（writeMe1，1000）；
//var writeMe2=setInterval（writeMe2，1000）；
//var writeMe3=setInterval（writeMe3，1000）；
函数writeMe1（）{
var p=document.createElement（“p”）；
p、 innerHTML=“列表1。”；
var ilu=document.getElementById（“ilu”）；
依附儿童（p）；
if（ilu.getElementsByTagName（“p”）.length==5）{
ilu.innerHTML=“”；
}
}
函数writeMe2（）{
var p=document.createElement（“p”）；
p、 innerHTML=“列表2。”；
var ilu=document.getElementById（“ilu”）；
依附儿童（p）；
if（ilu.getElementsByTagName（“p”）.length==5）{
ilu.innerHTML=“”；
}
}
函数writeMe3（）{
var p=document.createElement（“p”）；
p、 innerHTML=“列表3。”；
var ilu=document.getElementById（“ilu”）；
依附儿童（p）；
if（ilu.getElementsByTagName（“p”）.length==5）{
ilu.innerHTML=“”；
}
}
函数writeMe（）{
var p=document.createElement（“p”）；
p、 innerHTML=“列表1”；
var ilu=document.getElementById（“ilu”）；
依附儿童（p）；
if（ilu.getElementsByTagName（“p”）.length==5）{
ilu.innerHTML=“”；
}
}
//将所有函数分组，以便我们可以调用
//对应于单击的选项卡
var fns=[writeMe，writeMe1，writeMe2，writeMe3]；
var-tellMe=null；
var li=document.getElementsByTagName（“li”）；
//需要在这里使用“let”来避免生命
for（设i=0；i
您的方法存在一些问题：


在最初的问题中，您有一个名为
writeMe
的函数，当您设置间隔
var writeMe=setInterval（writeMe，1000）；
时，该函数在您的作用域中被重写。但您在注释中还提到，您将该函数重命名为
tellMe
，这应该解决了该冲突
在您的：

您正试图使用循环
i
的索引作为一个值。您需要了解变量范围和闭包。单击在循环结束后很久才会发生，并且无论单击哪个元素，
i
的值可能始终保持在
5
（在这种特殊情况下）
声明多个
writeMe
方法（如
writeMe2、writeMe3…
）不是解决方案。您必须添加另一个writeMe方法，该方法与其他方法具有相同的功能，但可能需要更改1或2个值
在循环中多次使用
i
，而不使用
var
将其声明为局部变量。您正在将上限变量隐藏到闭包范围中。尽管它不会影响您的用例（目前），但它会使代码在将来出现问题


尝试使用以下代码段


（函数（）{
“严格使用”；
函数writeMe（索引）{
window.console.log（'List'+（index+1））；
}
函数getClickHandler（索引、列表项）{
返回函数（事件）{
event.stopPropagation（）；
如果（间隔时间）{
窗口.clearInterval（intervalTimerId）；
}
if（this.style.backgroundColor==“黄色”）{
this.style.backgroundColor=“”；
返回；
}
/