Какой диапазон параметров функции, установленной onclick?

Question

У меня есть функция, которая принимает только строку HTML, она покажет информационное окно (всплывающее окно) с HTML в качестве содержимого:

function createInfoWindow(info_html){
    // show a popup with info_html as its content
}  

Теперь я хочу создать информационное окно,кнопка:

function createMyInfoWindow(o){
    var info_html = "<input type='button' value='click me' onclick='foo(o)'>"
    createInfoWindow(info_html);
}    

function foo(o){
    console.log(o);
}
createMyInfoWindow({ name: "test", age: 21);

Однако, когда я нажимаю кнопку, он говорит, что o не может быть найден.

Answer 1

Попробуйте следующий код

var info_html = "<input type='button' value='click me' onclick='foo(\""+o+"\")'>"

UPDATE

Если o является объектом, он становится более сложным.

Вы можете хранить переданные объекты в store-object. Тогда вы можете передать соответствующий индекс в foo:

var storage = [];
function createMyInfoWindow(o){
    var index = storage.length;
    storage[index] = o;
    var info_html = "<input type='button' value='click me' onclick='foo(\""+index+"\")'>"
    createInfoWindow(info_html);
}    

function foo(i){
    console.log(storage[i]);
}
createMyInfoWindow({ name: "test", age: 21);

Answer 2

То, как вы делаете это сейчас, является формой eval и, как правило, осуждается.Прочтите Ненавязчивый Javascript , если вы хотите знать все причины.

Однако, есть действительно превосходный способ выполнить ту же задачу безпроблемы с областью видимости (не говоря уже о попытке передать этот объект в функцию в строковой форме - да!

function createMyInfoWindow(o){
  // creating window first so we can access it from the DOM
  createInfoWindow(info_html);
  // we can select the window from the DOM now, but it would be even better if
  // createInfoWindow returned that object so we could just pick up where we left off
  var myInfoWindow = document.getElementById("myInfoWindow");

  // The button you are putting into the window
  var myButton = document.createElement("input");
  myButton.type = "button";
  myButton.value = "click me";
  // because of javascript closures, we can call foo(o) from within an anonymous function
  myButton.onclick = function () { foo(o) };
}

Я предпочитаю создавать элементы HTML таким способом по многим причинам: 1) Избегайте неявного использования eval, 2) намного проще отлаживать HTML, когда он генерируется для вас javascript и 3) больше нет проблем с областью действия для функций событий.

Вам просто нужно создать окно в обратном порядке сейчас, потому что элемент окна должен существовать первым, чтобы добавить к нему кнопку, и элемент кнопки должен существоватьпрежде чем вы сможете добавить обработчик onclick к нему.

Answer 3

В HTML-коде, присвоенном innerHTML входных данных, обработчики заключаются в функции, поэтому контекст является обработчиком, а затем глобальным (в цепочке областей действия могут быть другие объекты).

В вашем коде name является локальным по отношению к createMyInfoWindow , обработчик (или любая другая функция) имеет доступ к этой переменной. См. Ответ Молекулы о том, как его использовать.