es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • La función devuelve el error “Uncaught SyntaxError: expected expression, got }” en el evento onClick.

La función devuelve el error “Uncaught SyntaxError: expected expression, got }” en el evento onClick.

05 Aug, 2023 Programación

Quiero cambiar una variable de JavaScript en la acción onClick.

pero mi consola muestra este mensaje de error: Uncaught SyntaxError: la sentencia de función requiere un nombre

No sé por qué JavaScript se comporta así:

Mis códigos:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

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;

}

<!-- language: lang-css -->

.funcBtn{
  width: 160px;
  height: 80px;
  background-color: red;
  color: white;
  position:absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<!-- language: lang-html -->

<button type="button" onclick="createTable()">Create Table</button>

<div class="table_body"></div>

<!-- end snippet -->

Es muy interesante para mí saber por qué este código se comporta así, gracias.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El mensaje de error Uncaught SyntaxError: function statement requires a name ocurre cuando estás declarando una función anónima como una declaración, y requiere un nombre que se le asigne a la función. En tu código, estás intentando definir una función anónima dentro del atributo onclick en el código HTML.

    Para solucionar este error, puedes definir una función con nombre fuera del atributo onclick y luego llamarla dentro. Por ejemplo:

    const changeColor = function() {
  alert("color changed");
  color = 3;
}

const createTable = function() {
  const tableAdd_HTML = '<button class="funcBtn" onclick="changeColor()">Run js function in onClick action</button>';
  table_body.innerHTML = tableAdd_HTML;
}

    Luego, puedes llamar esta función dentro de onclick:

    <button class="funcBtn" onclick="changeColor()">Run js function in onClick action</button>

    Con esta modificación, el error debería resolverse y la variable color debería cambiarse según corresponda.

Comments are closed.