Question

我制作HTML文件和js文件，但我遇到了一些问题。

在HTML中有5个标签标签（并且没有特定的id或class名称），当我点击每个标签时，会出现弹出式（提示），并且结果（改变风格）。

改变风格并不难，所以我没事，但我的提示有问题。

我写了这段代码：

function changeCol(evnt) {
    var theEvent = evnt ? evnt : window.event;
        var label = document.getElementsByTagName("label");
        label[0].addEventListener ("click", function (){
            var one = prompt("Enter the color");
            label[0].style.color = one;
        });

        label[1].addEventListener ("click", function (){
            var two = prompt("Enter the color");
            label[1].style.color = two;
        });

        label[2].addEventListener ("click", function (){
            var three = prompt("Enter the color");
            label[2].style.color = three;
        });
    }

但是当我首先点击一个标签时，我点击第二个提示出现两次就可以买了......第三次点击显示提示三次......

当我想看到提示我必须点击两次，也许是因为功能。在js那里。

function loadevent(){ ...
         if (label){
        for (i=0;i < label.length; i++){
         label[i].onclick = changeCol;
        }
    }
}

我该怎么办？

Answer 1

您可以尝试使用以下代码段： -

var label = document.getElementsByTagName("label");
    function changeCol(element) {

        element.addEventListener ("click", function (){
            var promcolor= prompt("Enter the color");
            element.style.color = promcolor;

        });
    }

    function loadevent(){ 
         if (label){
            for (i=0;i < label.length; i++){
                changeCol(label[i]);
            }
        }
    }
loadevent();

我假设低于HTML

<p><label for="1">label-1</label></p>
<p><label for="2">label-2</label></p>
<p><label for="3">label-3</label></p>

我没有看到很多使用loadevent功能。但看到我认为有点其他代码。但如果它不是你可以简单地有一个像下面这样的功能：

function loadevent(){        
            for (itr=0;itr < label.length; itr++){
                label[itr].addEventListener ("click", function (){
                    var promcolor= prompt("Enter the color");
                    this.style.color = promcolor;   
                });
            }
    }

您的代码问题甚至在您在loadevent函数中迭代元素时，您为所有标签添加事件侦听器。这个代码不会发生这种情况。

Answer 2

<强>问题：

您实际代码的问题在于，对于每个标签，您使用此标签的索引并根据此索引循环提示提示，这就是为什么您只获得一个带有第一个标签的提示，两个提示带有第二个，三个带有第三个标签。

<强>解决方案：

最好的方法是在第一个函数中使用addEventListener，然后使用document.getElementsByTagName("label")遍历所有标签，并使用this关键字更改clicked label内的var labels = document.getElementsByTagName("label"); for (i = 0; i < labels.length; i++) { labels[i].addEventListener("click", function() { var prmt = prompt("Enter the color"); this.style.color = prmt; }); }颜色循环，这是你需要的：

<label> A</label><br>
<label> B</label><br>
<label> C</label><br>
<label> D</label><br>
<label> E</label><br>

id

注意：使用此代码，您无需为标签指定任何class或function loadevent(){ var labels = document.getElementsByTagName("label"); for (i = 0; i < labels.length; i++) { labels[i].addEventListener("click", function() { var prmt = prompt("Enter the color"); this.style.color = prmt; }); } ]或其他属性。

然后你只需要将这段代码放在你的加载函数中并在windows load中调用它：

{{1}}

Answer 3

这里你已经编写了在for循环中打开提示的脚本，因此根据标签号生成多个弹出窗口。即如果你点击第4个标签，它将打开提示4次。

要避免这种情况，您必须传递当前标签的索引。

function loadevent(){ 
         if (label){
        for (i=0;i < label.length; i++){
         label[i].onclick = changeCol(i);
        }
    }
}

function changeCol(index,evnt) {

    var theEvent = evnt ? evnt : window.event;
        var label = document.getElementsByTagName("label");
        label[index].addEventListener ("click", function (){
            var current_color = prompt("Enter the color");
            label[index].style.color = current_color;  
        });

    }

这可能对你有所帮助。

当我点击标签时，提示结果

3 个答案: