Quiero crear un elemento DOM a partir de una cadena HTML. Dentro de esa cadena, tengo un botón que debería llamar a una función global llamada downloadFile con argumentos predefinidos.
Mi primer intento:
<button onclick="downloadFile(${message_result})">Download</button>Pero esto no funcionó.
Todo el código se ve así
function downloadFile(result){ console.log(result) } (() => { const msg = {user: 'User', message: 'Message', result: {}} // any var markup = ` <h4>${msg.user}</h4> <p>${msg.message}</p> <button onclick="downloadFile(message_result)">Download</button> ` document.body.innerHTML = markup })()el error: ReferenceError no detectado: message_result no está definido en HTMLButtonElement.onclick
alguna sugerencia de cómo puedo pasar una variable a mi función
Primero resolvamos su problema y luego hablemos de un mejor enfoque.
Si asumimos que msg.result es una cadena: debe envolverlo con comillas.
<button onclick="downloadFile('${message_result}')">Download</button>`; Pero si su msg.result no es una cadena simple o desea tomar el camino correcto hacia la solución, entonces debemos pasar al siguiente enfoque.
// This is your downloadFile function const downloadFile = (data) => { console.log(data) } // This function creates download buttons const createDownloadButton = (response) => { const markup = ` <h4>${response.user}</h4> <p>${response.message}</p> <button>Download</button> ` const container = document.createElement("div") container.innerHTML = markup; // Here, we assign "click" functionality dynamically even before we inject the element into DOM container.getElementsByTagName("button")[0].addEventListener('click', () => { downloadFile(response.result) }) document.body.append(container) } // Fetch your response from an external service const msg = { user: 'Username', message: 'Message', result: { file: { link: 'https://stackoverflow.com' } } } // Call function to create download button createDownloadButton(msg)Si message_result es una variable, como msg.message , entonces debe hacer referencia a ella de manera similar.
var markup=` <h4>${msg.user}</h4> <p>${msg.message}</p> <button onclick="downloadFile('${message_result}')">Download</button>`;