点击返回按钮ID - JavaScript

时间:2016-07-27 12:31:10

标签: javascript html closures dom-events

我正在创建一个程序,该程序应该在加载时创建一列按钮。 之后,在点击时,它应该创建新的按钮列并显示单击按钮的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>

3 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:2)

您必须使用闭包来保持按钮ID

工作代码

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

答案 2 :(得分:1)

你想添加一个这样的监听器:

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

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

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