0
270
Vistas¿Cómo pasar argumentos a un botón HTML generado en JavaScript?
Tengo el siguiente código:
<!DOCTYPE html> <body> <table> <tr> <td id="toConsole"> Hi I would like to print this in console</td> </tr> <tr> <td><input type="text" id="intext"></td> </tr> <tr> <td id="btnAdd"></td> </tr> </table> <script> function addBtnAdd() { document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd(document.getElementById("toConsole").textContent, document.getElementById("intext"))">Print in console</button>` } function printBtnAdd(text, inputtext) { console.log(text, inputtext) } addBtnAdd(); </script> </body> </html> Como puede ver, genero un botón en JS y lo introduzco en un elemento td de una tabla, con ese botón me gustaría imprimir el texto Hi I would like to print this in console consola, y obtengo el valor de la entrada e imprímala también en la consola, haciendo esto al mismo tiempo presionando el botón que intro antes.
Con mi código acabo de recibir en la consola el siguiente error:
Uncaught SyntaxError: Unexpected end of input (at pop.html:25:50)Y, por ejemplo, si tengo el siguiente en mi página:
Me gustaría entrar en la consola:
'Hi I would like to print this in console', 'Hi'Espero que me puedas ayudar, gracias.
2 Respuestas
Responde la pregunta0
Este es tu problema:
document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd(document.getElementById("toConsole").textContent, document.getElementById("intext"))">Print in console</button>`Tenga en cuenta este bit:
<button onclick="printBtnAdd(document.getElementById("debiera ser:
<button onclick="printBtnAdd(document.getElementById(\"al no escapar puede solucionar este problema.
document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd(document.getElementById(\"toConsole\").textContent, document.getElementById(\"intext\"))">Print in console</button>0
me gustaría cambiar
<script> function addBtnAdd() { document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd(document.getElementById("toConsole").textContent, document.getElementById("intext"))">Print in console</button>` } function printBtnAdd(text, inputtext) { console.log(text, inputtext) } addBtnAdd(); </script>A
<script> function addBtnAdd() { document.getElementById("btnAdd").innerHTML = `<button onclick="printBtnAdd()">Print in console</button>` } function printBtnAdd() { const text = document.getElementById("toConsole").textContent, const inputtext = document.getElementById("intext") console.log(text, inputtext) } addBtnAdd(); </script>Esto mantiene su HTML interno un poco más limpio. La desventaja sería si quisiera usar esa función para varias cosas diferentes, pero si esto es todo para lo que la está usando, debería funcionar bien.