javascript создание кнопки из объекта

Question

при создании кнопки из объекта javascript я делаю следующее:

    for (buttonName in buttons){ 
         var htmlbutton = '<button type="button" onclick="'+buttons[buttonName]()+'">'+buttonName+'</button>' 
}

Я пытаюсь прикрепить функцию к событию onclick, но я не могу понять правильный sythanx

спасибо заранее

Answer 1

Вы не можете встроить экземпляр Function в строку.

Если переменная buttons является глобальной, она будет доступна для кода внутри атрибута обработчика события onclick:

var htmlbutton= '<button type="button" onclick="buttons[\''+buttonName+'\']()">'+buttonName+'</button>' 

Однако в приведенном выше коде экранирования нет, поэтому у вас будут проблемы (возможно, проблемы с безопасностью), если buttonName может содержать символы <, &, ' или ",Вам придется избегать их различными способами для JavaScript и HTML, в которые вы встраиваете строки.

Гораздо лучше избегать слинга строк для создания HTML вообще.Тогда вы можете использовать методы DOM и нативные объекты JavaScript и избежать всей запутанной гадости строк-внутри-строк.

var button= document.createElement('button');
button.type= 'button';
button.appendChild(document.createTextNode(buttonName));
button.onclick= buttons[buttonsName];

Answer 2

Хотя использование jquery в этом случае не требуется, код, который я пишу, предназначен для плагина jquery.Пока что это лучшее решение, которое я мог бы придумать:

$.each(buttons, function(name, fn) {   

   $('<input type="button" value="'+name+'" />').click(function() { fn.apply() }); 


  });

Мне еще предстоит выяснить, есть ли какие-либо подводные камни в использовании свойства call или apply, но пока это работает как шарм.

Ваши мысли и комментарии очень высоко ценятся

Answer 3

Я думаю, вы ищете что-то вроде этого:

for(buttonName in buttons) {
    var htmlbutton = '<button type="button" onclick="window.buttons[\''+buttonName+'\']()">'+buttonName+'</button>';

Вместо печати всей функции в атрибуте onclick, это просто выводит имя вызываемой функции. Просто убедитесь, что buttons находится в правильной области.

Answer 4

Попробуйте заменить ваш код на:

for (buttonName in buttons)
{
     var htmlbutton = 
         '<input' + 
         ' type="button"' +
         ' value="' + (buttons[buttonName]).replace(/"/gi, "&quot;") + '"' +
         ' onclick="' + (buttons[buttonName]).replace(/"/gi, "&quot;") + '()"/>';
}

Отредактировано для уточнения:

Так как в HTML нет надежного <button> тега.

С W3School веб-сайт:

Важно: Если вы используете элемент button в форме HTML, разные браузеры будут отправлять разные значения. Internet Explorer отправит текст между тегами <button> и </button>, в то время как другие браузеры отправят содержимое атрибута value. Используйте элемент <input> для создания кнопок в форме HTML.