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

when i click label, prompts make result

本文关键字：提示 结果 单击 标签      更新时间：2023-09-26

我制作了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;
        });
    }

但是当我先点击一个标签，它是可以的，当我点击第二个提示出现两次…第三次点击显示提示三次…

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

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

我该怎么办?

试试下面的代码片段:-

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>

我没有看到太多使用loaddevent函数。但是看到这些点，我假设这里有一些其他的代码。但如果不是，你可以简单地使用下面的一个函数:

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


此外，您的代码的问题是，即使当您在loaddevent函数中迭代元素时，您也会为所有标签添加事件侦听器。这段代码不会发生这种情况。

问题:

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

解决方案:

最好的方法是使用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或其他属性。

然后你只需要把这段代码放入你的load函数中然后在windows load:

中调用它
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;
    });
  }
]

在这里，您已经编写了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;  
        });
    }
相关文章：