點擊返回按鈕ID - JavaScript

我正在製作一個程序，該程序應該在加載時製作一列按鈕。之後，點擊後，它應該新建一列按鈕並顯示點擊按鈕的ID。點擊返回按鈕ID - JavaScript

當它應該創建新的按鈕列時它工作正常，但它顯示列中每個按鈕的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>

來源

2016-07-27 Milos Nikolic

讓我知道你是否需要一些輔助信息 –

問題是你所說的事件處理程序和它的返回值附加到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

來源

2016-07-27 12:37:38 DAXaholic

你想添加一個偵聽器這樣的：

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

不幸的是，reply_clickk(some)是一個函數調用返回undefined。你必須延遲函數調用，即返回另一個功能：

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

來源

2016-07-27 12:42:42

你必須使用一個閉合保持按鈕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>

來源

2016-07-27 12:47:00

點擊返回按鈕ID - JavaScript

回答

相關問題