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

标签 javascript html arrays object

请原谅我的乐队 HTML 惯例。我只有这样的标签 供测试用。我正在尝试建立一个我可以调用的函数 site,它将采用静态定义的 JSON 变量,并将其传递给 到一个将从 JSON 创建 HTML 的函数。我进入 当我没有收到任何错误时遇到麻烦,但我无法通过按钮来 他们的 JSON 定义了 onclick 命令。我看了检查员 页面加载并且 JS 运行后,但按钮不运行 有 onclick 属性。我没有遇到任何问题 环形。按钮的名称很好用。我被困在获取JS上 在 JSON 中添加到按钮。

//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>

最佳答案

这是因为您尝试在处理程序中使用参数分配事件监听器。你不能这样做。您应该将每个事件处理程序放在匿名函数中,并使用 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>

关于javascript - 为什么我的按钮没有收到 js 循环创建的 onclick 命令?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54264851/

相关文章:

javascript - 这个正则表达式的解释

javascript - 带有 Angular JS 解析列表的选项列表

javascript - HTML5 视频播放器全屏问题

php - 在 PHP 中使用资源作为数组索引

arrays - 在 SWIFT 中过滤字符串数组的谓词抛出错误,指出 NSCFString 不是键值编码

java - 在 Java-8 中重构多个 If' 语句

javascript - Node.js 类型错误 : undefined is not a function

javascript - 我怎样才能让ahoy的javascript异步函数跟踪同步

javascript - 每次在输入字段中按下一个键时调用一个javascript函数

html - 将 div 放置在此滑动侧边栏旁边的最佳方式?