Как вызвать функцию с аргументами из динамического html?

180

19 октября 2018, 07:40

У меня функция генерирует html.

function text(massive){
    var text  = '<button oclick='get_func(massive);'></button>';
    document.getElementById("block_to_dynamic_pole_adv").innerHtml = text;
}

как мне вызвать функцию get_func с аргументом правильно, если сейчас ошибка вылазит , т.к massive - это объект с данными ?

Answer 1

Проблема заключается в неверном способе собирания строки:

внутри одинарных кавычек нельзя использовать неэкранированные одинарные кавычки.

Для экранирования можно воспользоваться обратным слэшем.

Либо использовать разный тип кавычек, например:

function text(massive){
    var text  = "<button oclick='get_func(massive);'></button>";
    document.getElementById("block_to_dynamic_pole_adv").innerHtml = text;
}

Однако в этом случае и функция get_func и переменная massive должны быть объявлены глобально.

Если нужно, чтобы передавался параметр функции text, то с помощью сбора строк такое можно реализовать только есть параметр можно сериализовать в строку, например:

function text(massive){
    var text  = `<button oclick='get_func(${JSON.stringify(massive)});'></button>`;
    document.getElementById("block_to_dynamic_pole_adv").innerHtml = text;
}

В противном случае лучше создавать элементы самому:

function text(massive){
    var text  = document.createElement('button');
    text.onclick = function(){
        get_func(massive);
    };
    document.getElementById("block_to_dynamic_pole_adv").appendChild(text);
}

В ответе использовались методы document.createElement, .appendChild, а также шаблонные строки и JSON.stringify