Return 点击时的按钮 ID - JavaScript

Question

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

当它应该创建新的按钮列时它工作正常，但它显示列中每个按钮的 id。它甚至 returns 我下一列的 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>

Answer 1

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

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

Answer 2

您想像这样添加一个侦听器：

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

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

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

Answer 3

您必须使用闭包来保留按钮 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>

Return 点击时的按钮 ID - JavaScript

Return button id on click - JavaScript

html

javascript

closures

dom-events