gpt4 book ai didi

javascript - 如何在以后的点击事件中访问动态创建的文本节点的值?

转载 作者:行者123 更新时间:2023-11-30 20:31:59 25 4
gpt4 key购买 nike

我有一个 Javascript 项目。这是一个乘法表,当单击每个单元格时,它应该显示该单元格的结果。

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
<style>
.tdstyles {
width: 50px;
height: 50px;
text-align: center;
}
</style>
</head>
<body>
<div id="Holder"></div>
</body>
</html>
<script type="text/javascript">
var m;
window.onload = function () {
var table = document.createElement('table');
table.border = 1;
table.cellPadding = 0;
table.cellSpacing = 0;
for (var i = 1; i <= 10; i++) {
var tr = document.createElement('tr');

for (var j = 1; j <= 10; j++) {
m = i*j;
var td = document.createElement('td');
var newContent = document.createTextNode(m);
td.className = "tdstyles";
tr.appendChild(td);
td.appendChild(newContent);
document.getElementsByTagName("td").innerHTML = m;
td.onclick = function () {
console.log();
};
var a = Math.round(Math.random() * 255);
var b = Math.round(Math.random() * 255);
var c = Math.round(Math.random() * 255);
td.style.backgroundColor = "rgb(" + a + "," + b + "," + c + ")";

// myFunction();
}
table.appendChild(tr);
Holder.appendChild(table)
}
};
</script>

如何在循环中保存该 TextNode 并在单击该 td 时使用它?

最佳答案

您应该将对文本的引用保存在每个内部迭代的闭包中,以便以后可以访问它。另请注意,如果元素的唯一子节点将成为文本节点,则将其分配给元素的 textContent 可能会容易得多。

for (let j = 1; j <= 10; j++) {
const text = i * j;
const td = tr.appendChild(document.createElement('td'));
td.textContent = 'text';
td.className = "tdstyles";
td.onclick = function() {
console.log(text);
};
// ...

请注意,我使用的是 constlet 而不是 var - 这非常重要。 var 具有函数作用域并且被提升,这很容易导致混淆,尤其是当您有任何异步代码时; constlet 更直观。

关于javascript - 如何在以后的点击事件中访问动态创建的文本节点的值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50247812/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com