时间戳

首页 > 解决方案 > 如何在以后的点击事件中访问动态创建的文本节点的值？

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

问题描述

我有一个 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 时使用它？

标签： javascript

解决方案

您应该在每次内部迭代的闭包中保存对文本的引用，以便以后可以访问它。另请注意，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);
  };
  // ...

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

推荐阅读