单击时返回按钮 ID - JavaScript答案

【问题标题】：Return button id on click - JavaScript单击时返回按钮 ID - JavaScript
【发布时间】：2023-03-18 14:11:01
【问题描述】：

我正在制作一个程序，它应该在加载时制作一列按钮。之后，单击时，它应该创建新的按钮列并显示被单击按钮的 ID。

当它应该创建新的按钮列时它工作正常，但它显示列中每个按钮的 id。它甚至会返回我下一列的 ID。第一个按钮列的 ID 在加载时显示。

谁能帮我让它只显示被点击的按钮的ID。这是代码：

<html> <head>
<style>
.addItem {
  width: 80px;
  float: left;} </style>
<script>
var lev = 0; var levmax=5;var some;

function addBu(){
    repeat();
};

function repeat(){
    if(lev<levmax){
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        di.className="addItem";
        for (var i=0; i<4; i++){
            var bu= document.createElement('BUTTON');  
            var te = document.createTextNode('Text');
            var te1 = document.createTextNode(lev.toString());
            var br = document.createElement('BR');
            bu.id=(lev*10+i).toString();
            some=(lev*10+i).toString();         
            bu.addEventListener("click", repeat);
            bu.addEventListener("click" , reply_clickk(some));      
            bu.appendChild(te);
            bu.appendChild(te1);
            di.appendChild(bu);
            di.appendChild(br);     
        }       
        bo.insertBefore(di, bo.childNodes[0]);  
    }   

    function reply_clickk(clicked_id){
        alert(clicked_id);
    };

};
</script>
</head> 
<body id="kod" onload="addBu()">
</body></html>

【问题讨论】：

如果您需要其他信息，请告诉我

标签： javascript html closures dom-events

【解决方案1】：

你必须使用闭包来保持按钮 id

工作代码

var lev = 0;
    var levmax = 5;
    var some;

    function addBu() {
      repeat();
    };


    function reply_clickk(clicked_id) {
      alert(clicked_id);
    };

    function repeat() {
      if (lev < levmax) {
        lev++;
        var bo = document.getElementById("kod");
        var di = document.createElement('DIV');
        di.className = "addItem";
        for (var i = 0; i < 4; i++) {
          var bu = document.createElement('BUTTON');
          var te = document.createTextNode('Text');
          var te1 = document.createTextNode(lev.toString());
          var br = document.createElement('BR');
          bu.id = (lev * 10 + i).toString();
          some = (lev * 10 + i).toString();
          bu.addEventListener("click", repeat);
          bu.addEventListener("click", function(some) {
            return function() {
              reply_clickk(some)
            }
          }(some));
          bu.appendChild(te);
          bu.appendChild(te1);
          di.appendChild(bu);
          di.appendChild(br);
        }
        bo.insertBefore(di, bo.childNodes[0]);
      }


    };

.addItem {
      width: 80px;
      float: left;
    }

<body id="kod" onload="addBu()">
</body>

【讨论】：

【解决方案2】：

问题是您调用事件处理程序并将其返回值附加到单击事件而不是函数。

bu.addEventListener("click" , reply_clickk(some));

你可能更想要这样的东西

bu.addEventListener("click" , function(e){reply_clickk(e.target.id)});

此外，您的 some 变量是全局变量；将其更改为 var some 以适用于您的函数 repeat

var some=(lev*10+i).toString();

见JSFiddle

【讨论】：

【解决方案3】：

你想像这样添加一个监听器：

bu.addEventListener("click" , reply_clickk(some));

不幸的是，reply_clickk(some) 是一个返回 undefined 的函数调用。您必须推迟函数调用，即返回另一个函数：

function reply_clickk(clicked_id){
    return function () {
        alert(clicked_id);
    };
};

【讨论】：