Почему мои кнопки не получают команду onclick, созданную в цикле js? - PullRequest
0 голосов
/ 19 января 2019

Пожалуйста, прости мою конвенцию HTML в группе. У меня просто есть такие теги для тестирования. Я пытаюсь иметь, что я функционирую, я могу позвонить моим сайт, который будет принимать статически определенную переменную JSON и передавать ее к функции, которая будет создавать HTML из JSON. Я захожу в проблема, когда я не получаю никаких ошибок, но я не могу получить с помощью кнопок определите их 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>

1 Ответ

0 голосов
/ 19 января 2019

Это потому, что вы пытаетесь назначить прослушиватель событий с параметрами в обработчике.Вы не можете сделать это.Вы должны поместить каждый обработчик событий в анонимную функцию и создавать функции из строк, используя 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...