Quiero cambiar una variable de Javascript en la acción onClick.
pero mi consola devuelve este mensaje de error : Uncaught SyntaxError: function statement requires a name
No sé por qué JavaScript se comporta así:
Mis codigos:
const table_body = document.querySelector('.table_body'); let color = 550; const createTable = function() { const tableAdd_HTML = '<button class="funcBtn" onclick="javascript:(function() { alert("color changed"); color = 3; })()">Run js function in onClick action</button>'; table_body.innerHTML = tableAdd_HTML; } .funcBtn{ width: 160px; height: 80px; background-color: red; color: white; position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } <button type="button" onClick="createTable()">Create Table</button> <div class="table_body"></div>Es muy interesante para mí saber por qué este código se comporta así, Gracias.
La primera cita en alert("color changed") coincide con la cita en onclick=" , por lo que finaliza el atributo.
Utilice comillas simples en el atributo para que no coincidan con el delimitador del atributo.
Luego, debe asegurarse de que esto no entre en conflicto con las comillas que delimitan toda la cadena HTML. Puede escapar de las comillas simples, pero una solución simple es hacer que la cadena sea una plantilla literal.
const table_body = document.querySelector('.table_body'); let color = 550; const createTable = function() { const tableAdd_HTML = `<button class="funcBtn" onclick="javascript:(function() { alert('color changed'); color = 3; })()">Run js function in onClick action</button>`; table_body.innerHTML = tableAdd_HTML; } .funcBtn{ width: 160px; height: 80px; background-color: red; color: white; position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } <button type="button" onClick="createTable()">Create Table</button> <div class="table_body"></div>Puede evitar todos estos problemas de cotización utilizando objetos DOM en lugar de cadenas HTML y JavaScript en línea.
const table_body = document.querySelector('.table_body'); let color = 550; const createTable = function() { const button = document.createElement("button"); button.classList.add("funcBtn"); button.addEventListener("click", function() { alert("color changed"); color = 3; }); button.innerText = "Run js function to change color"; table_body.innerHTML = ''; table_body.appendChild(button); } .funcBtn { width: 160px; height: 80px; background-color: red; color: white; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } <button type="button" onClick="createTable()">Create Table</button> <div class="table_body"></div>