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