时间戳

首页 > 解决方案 > 为什么我的按钮没有收到他们的 js 循环创建的 onclick 命令？

javascript - 为什么我的按钮没有收到他们的 js 循环创建的 onclick 命令？

问题描述

请原谅我的乐队 HTML 约定。我只有这样的标签用于测试。我试图有一个我可以通过我的站点调用的函数，它将采用静态定义的 JSON 变量，并将其传递给将从 JSON 创建 HTML 的函数。当我没有收到任何错误时，我遇到了麻烦，但我无法通过按钮让他们的 JSON 定义 onclick 命令。在页面加载并运行 JS 后，我查看了检查器，但按钮没有 onclick 属性。我没有从循环中得到任何问题。按钮的名称工作正常。我坚持将 JSON 中的 JS 放到按钮上。

//Examle of mkmdl() input:
let inputVar = {
  'buttons': [{
      "button": "I'm a button",
      "command": "console.log('Im a command');"
    },
    {
      "button": "Me too",
      "command": "console.log('Me too');"
    }
  ],

  'message': "This here is our modle message.",

  'image': 'URL(image URL)'
}




function mkmdl(obj) {
  // this function makes model boxes from the supplied JSON object.

  //image

  //message

  //button(s)
  for (var i = 0, size = obj['buttons'].length; i < size; i++) {
    console.log(i);

    let v = obj["buttons"][i]["button"];
    let x = obj["buttons"][i]["command"];

    var newElement = document.createElement("button");

    newElement.onclick = x;

    newElement.innerHTML = v;


    document.getElementById("body").appendChild(newElement);

  }
}

window.onload = mkmdl(inputVar);
window.onload = function() {
  inputVar["buttons"][1]["command"]
};
<body id="body">

</body>

标签： javascripthtmlarraysobject

解决方案

这是因为您试图在处理程序中为事件侦听器分配参数。你不能这样做。您应该将每个事件处理程序放在一个匿名函数中，并使用以下字符串创建函数new Function：

//Examle of mkmdl() input:
let inputVar = {
  'buttons': [{
      "button": "I'm a button",
      "command": "console.log('Im a command');"
    },
    {
      "button": "Me too",
      "command": "console.log('Me too');"
    }
  ],

  'message': "This here is our modle message.",
  'image': 'URL(image URL)'
}


function mkmdl(obj) {
  // this function makes model boxes from suppiled JSON object.

  //image

  //message

  //button(s)
  for (var i = 0, size = obj['buttons'].length; i < size; i++) {
    console.log(i);

    let v = obj["buttons"][i]["button"];
    let x = new Function(obj["buttons"][i]["command"]);

    var newElement = document.createElement("button");
    newElement.onclick = () => x();
    newElement.innerHTML = v;

    document.getElementById("body").appendChild(newElement);
  }
}

window.onload = mkmdl(inputVar);
window.onload = function() {
  inputVar["buttons"][1]["command"]
};
<body id="body">

</body>

推荐阅读