1

часть кода такая:

var result = 'hello world hello world';

document.getElementById('enter').innerHTML = '<button onclick="go(result)" class="btn btn-default another">Проверка</button>';

Как правильно передать result в функцию, пробовал простым методом '+result+' , но на выходе получаю очень страшный хтмл, строка гуляет по всему элементу button.

2 ответа 2

2

Метод innerHTML использовать довольно накладно. Проще и быстрее работает динамическое создание и управление объектами DOM дерева:

var result = 'hello world hello world',
    go = function(str) { alert(str); };

var button = document.createElement('button');
button.className = 'btn btn-default another';
button.appendChild(document.createTextNode('Проверка'));
button.addEventListener('click', function() {
    go(result);
}, false);

document.getElementById('enter').appendChild(button);
<div id="enter"></div>

8
  • Хах, опередил, я пока код структурировал, ты запостил ответ, в общем-то похожий на мой. Или мой похожий на твой - это с какой стороны смотреть, хотя яйца и в профиль, и в анфас - одна хрень...
    – user31688
    13 апр 2015 в 22:57
  • @TheDoctor Факт. Хотя твой код создает <input> элемент, а мой -- <button>. В остальном, действительно, один в один :)
    – VisioN
    13 апр 2015 в 22:59
  • Мне инпуты больше греют душу :) innerHTML лучше юзать в других местах, но не создании кнопки, на которую нужно навесить обработчик.
    – user31688
    13 апр 2015 в 23:05
  • @TheDoctor Ну это до тех пор пока в евоный bootstrap не потребуется какую-нибудь glyphicon запихнуть: там уж либо <button>, либо вообще нечто вроде <a>.
    – VisioN
    13 апр 2015 в 23:10
  • Угу, хотя от bootstrap'а у меня глаза скоро вытекать начнут: jQuery портит JS, а BS - HTML/CSS.
    – user31688
    13 апр 2015 в 23:15
2

Забудь о onClick, это рудимент прошлого.
Сделай так:

var result = 'hello world hello world';
function go(e){
  document.querySelector('#result').innerHTML = 'Function <strong>go</strong> has been started with arguments: <em>' + e + '</em>';
}

var btn = document.createElement('input');
btn.type = 'button';
btn.className = 'btn btn-default another';
btn.value = 'Проверка';
btn.addEventListener('click', function(){go(result);});
document.getElementById('enter').appendChild(btn);
<div id='enter'></div><br />
<span id='result'>&nbsp;</span>

UPD:

Опередили чуть-чуть :)

1
  • :P . . . . . .
    – VisioN
    13 апр 2015 в 22:54

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.