点击返回按钮id-JavaScript

Return button id on click - JavaScript

本文关键字：id-JavaScript 按钮 返回      更新时间：2023-09-26

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

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

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

您必须使用闭包来保持按钮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);
    };
};
相关文章：