Question

我是javascript的新手，我试图创建一个按钮菜单。在菜单中，我想在单击按钮时添加事件侦听器。我的问题是我不确定如何实现它，以便能够使用按钮需要运行的特定代码来定位每个按钮。

我有一个按钮，点击时需要变红，另一个需要加载另一个网站。怎么可能实现这些目标。

目前我从JSON文档生成按钮，并在下面的代码中创建它们。

编辑：将id属性添加到javascript

function createMenu(jsonObj) {
let menu = jsonObj["menuitems"];
console.log(menu[0]);

let table = document.createElement("table");

for (let i = 0; i < menu.length; i++) {
    let tableSection = document.createElement("tr");
    let tableItem = document.createElement("td");
    tableSection.appendChild(tableItem);
    let button = document.createElement("BUTTON");
    tableItem.appendChild(button);
    let text = document.createTextNode(menu[i].item);
    button.appendChild(text);
    button.classList.add("menuButtons");
    table.appendChild(tableSection);
    button.setAttribute("id", menu[i].id);
    button.addEventListener("click",/*What do i write here*/);
}

document.getElementById("menuDiv").appendChild(table);
}

Answer 1

标准建议不要在循环中声明变量。您可以创建一个属性（ data-horsSujet ）并比较该值以了解要执行的操作。像这样：

function createMenu(jsonObj) {
const menu = jsonObj["menuitems"];
console.log(menu[0]);

const table = document.createElement("table");

const myfct = function (event) {
    const button = event.target;
    if (button.getAttribute("data-horsSujet") == 1)
        button.style.color = "red";
    else
        document.location = "google.fr";
}

for (let i = 0, tableSection, tableItem, button, text; i < menu.length; i++) {
    tableSection = document.createElement("tr");
    tableItem = document.createElement("td");
    tableSection.appendChild(tableItem);
    button = document.createElement("BUTTON");
    tableItem.appendChild(button);
    text = document.createTextNode(menu[i].item);
    button.appendChild(text);
    button.classList.add("menuButtons");
    table.appendChild(tableSection);
    button.setAttribute("id", menu[i].id);
    button.addEventListener("click", myfct);
    button.setAttribute("data-horsSujet", i);
}

document.getElementById("menuDiv").appendChild(table);
}

如何在循环中向按钮添加事件侦听器

1 个答案: