当我单击标签时，提示会产生结果

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

您好尝试使用下面的代码 sn-p:-

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 或其他属性。

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

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;
    });
  }
]

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;  
        });

    }

这可能会对你有所帮助。