Вернуться идентификатор кнопки при нажатии - JavaScript

Я делаю программу, которая должна сделать столбец кнопок при загрузке. После этого по нажатию должен появиться новый столбец кнопок и отобразиться идентификатор кнопки, по которой вы нажали.

Он отлично работает, когда предполагается создать новый столбец кнопок, но отображает идентификатор каждой кнопки в столбце. Он даже возвращает мне идентификаторы следующего столбца. Идентификаторы столбцов первой кнопки отображаются при загрузке.

Может ли кто-нибудь помочь мне сделать так, чтобы он отображал только идентификатор нажатой кнопки. Вот код:

<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 ответа

Решение

Проблема в том, что вы вызываете обработчик события и присоединяете его возвращаемое значение к событию 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

Источник

You have to use a closure to keep the button 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>

Источник

Вы хотите добавить слушателя так:

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

К несчастью, reply_clickk(some) это вызов функции, который возвращает undefined, Вы должны отложить вызов функции, т.е. вернуть другую функцию:

function reply_clickk(clicked_id){
    return function () {
        alert(clicked_id);
    };
};
Источник
Другие вопросы по тегам