Meta:
Estoy tratando de completar las variables de una función dentro de un atributo 'onclick' de un botón creado dinámicamente usando javascript y HTML. Cuando presiono el botón, quiero ejecutar una función basada en las variables dentro del botón. Las variables provienen de un objeto JS (o mejor dicho, un objeto específico dentro de una lista de objetos).
Esto es lo que he intentado:
var testDivElement = document.getElementById("testDiv"); //Object var locations = [{ name: "Califonia", address: "Califonia Test Address", times: [1, 2, 3, 4, 5] }, { name: "Idaho", address: "Idaho Test Address", times: [1, 2, 3] }, { name: "Iowa", address: "Iowa Test Address", times: [0] } ]; //Function function createDivs() { var content; for (i in locations) { content += '<div>' + '<p>' + locations[i].name + '</p>' + '<p>' + locations[i].address + '</p>' + '<button onclick="readDataToConsole(' + location[i].name + ',' + location[i].address + ',' + location[i].times + ')">Press Me</button>'; } testDivElement.innerHTML = content; } function readDataToConsole(name, address, times) { console.log(name); console.log(address); for (i in times) { console.log(times[i]); } } <body> <button onclick="createDivs()">clickMeNow</button> <div id="testDiv"></div> </body> Puedo generar lo que está en las etiquetas <p> cuando no trato de incluir la etiqueta <button> .
No puedo encontrar nada más en línea que pueda ayudarme con esto.
Ponga comillas alrededor de los argumentos de cadena para readDataToConsole() . Use JSON.stringify() para convertir la matriz de times en una matriz literal.
Y para que el código sea más fácil de leer y escribir, use una plantilla literal en lugar de mucha concatenación de cadenas.
var testDivElement = document.getElementById("testDiv"); //Object var locations = [{ name: "California", address: "California Test Address", times: [1, 2, 3, 4, 5] }, { name: "Idaho", address: "Idaho Test Address", times: [1, 2, 3] }, { name: "Iowa", address: "Iowa Test Address", times: [0] } ]; //Function function createDivs() { var content = ''; for (let i in locations) { content += `<div><p>${locations[i].name}</p> <p>${locations[i].address}</p> <button onclick="readDataToConsole('${locations[i].name}', '${locations[i].address}', ${JSON.stringify(locations[i].times)})">Press Me</button>`; } testDivElement.innerHTML = content; } function readDataToConsole(name, address, times) { console.log(name); console.log(address); for (i in times) { console.log(times[i]); } } <body> <button onclick="createDivs()">clickMeNow</button> <div id="testDiv"></div> </body>