时间戳

首页 > 解决方案 > 使用 Javascript 将 onClick 事件嵌入 HTML div

javascript - 使用 Javascript 将 onClick 事件嵌入 HTML div

问题描述

我正在尝试使用 div 作为它们的单元格来制作可交互和可配置的网格。

为了首先给出这部分代码的一些上下文，我基本上只是在 HTML 输出中重复 td，然后将特定数量的 div 附加到 td/行中（cellID 只是一种装饰 div 名称的方法）；

var table, row, div;
table = document.createElement('table');
for (var i=0; i < rows; i++)
{
    row = document.createElement('td');
    row.id = "row-" + i;
    for (var j=0; j < cols; j++)
    {
        div = document.createElement('div');
        div.id = cellID(i, j);
        row.append(div);
    }
    table.append(row);
}

假设：-rows = 4 和 -cols = 2 | 用户端的输出结果是这样的：

2x4 网格的显示示例

现在，我正在尝试解决的当前问题是如何为每个重复的 div 赋予 onClick() 事件，以便在您单击框时发生事件，这是我试图使其工作的原因：

  1. div.addEventListener("点击", null); //这部分对我不起作用，虽然说实话，我真的不知道用什么替换null
  2. div.getElementById(div.id).onclick = function() { OnClick() }; （OnClick 是一种测试方法，看看它是否有效，但是这个方法只是拒绝一个错误，说“div.getElementById”不是一个函数，所以我不知道这是怎么回事。）

我尝试的这些东西都是自始至终推荐的东西，但我不知道还有什么可以使它起作用。

你认为问题可能在哪里？

-

标签： javascripthtml

解决方案

div.addEventListener()应该管用。

但是您需要创建有效的 DOM 结构。行是tr，单元格是td。您可以将 放在div中td，也可以td直接使用 。

let rows = 2,
  cols = 4;
var table, row, div;
table = document.createElement('table');
for (var i = 0; i < rows; i++) {
  row = document.createElement('tr');
  row.id = "row-" + i;
  for (var j = 0; j < cols; j++) {
    let cell = document.createElement("td");
    div = document.createElement('div');
    div.id = cellID(i, j);
    div.addEventListener("click", function() {
      console.log('Clicked on', this.id);
    });
    div.innerText = div.id;
    cell.append(div);
    row.append(cell);
  }
  table.append(row);
}
document.body.appendChild(table);

function cellID(i, j) {
  return `cell-${i}-${j}`;
}

推荐阅读