Question

我有一个while循环，循环6次，每次循环创建一个TD元素以及为它设置一个id，我遇到的问题是，其中一个TD的id是最后一个结果循环。

var table = document.getElementById("table_calendar");
var tr = document.createElement("tr");
var td;
var days_displayed = 1;
while(i<=6){
    td = document.createElement("td");
    td.innerHTML = days_displayed;
    td.classList.add("tdd");
    td.id = year+"-"+month +"-"+days_displayed;
    console.log(days_displayed);
    td.onclick = function(){
        alert(td.id);
    };
    days_displayed++;
    i++;
    tr.appendChild(td);
}
table.appendChild(tr);

警报功能显示我点击的所有道明 2018-02-6

innerHTML具有不同的值，例如1 2 3 4 5 6

我错过了什么吗？

Answer 1

您应该使用id

访问HTML元素的this

＆＃13;

var table = document.getElementById("table_calendar");
var tr = document.createElement("tr");
var td;
var days_displayed = 1;
var year = "2028"
var month = "02"
var i = 0
while(i<=6){
    td = document.createElement("td");
    td.innerHTML = days_displayed;
    td.classList.add("tdd");
    td.id = year+"-"+month +"-"+days_displayed;
    console.log(days_displayed);
    td.onclick = function(){
        alert(this.id);
    };
    days_displayed++;
    i++;
    tr.appendChild(td);
}
table.appendChild(tr);

＆＃13;

<table>
  <tr id="table_calendar">
  </tr>
</table>

＆＃13;

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

这里发生的是td.id将返回创建的最后一个元素，因为它已在循环外声明为var。 var的范围不仅限于{}内的区块。如果您希望变量是块作用域，则必须使用let代替：

＆＃13;

var table = document.getElementById("table_calendar");
var tr = document.createElement("tr");
var days_displayed = 1;
var year = "2028"
var month = "02"
for(let i = 0; i <= 6; i++){
    let td = document.createElement("td");
    td.innerHTML = days_displayed;
    td.classList.add("tdd");
    td.id = year+"-"+month +"-"+days_displayed;
    console.log(days_displayed);
    td.onclick = function(){
        alert(td.id);
    };
    days_displayed++;
    tr.appendChild(td);
}
table.appendChild(tr);

＆＃13;

<table>
  <tr id="table_calendar">
  </tr>
</table>

＆＃13;

What's the difference between using "let" and "var" to declare a variable?

问候

内部循环元素具有所有id的最后一个循环值

1 个答案: