function return 'Uncaught SyntaxError: expected expression, got }' error in onClick event

Question

我想在 onClick 操作中更改一个 Javascript 变量。

但是我的控制台 return 这个错误消息：Uncaught SyntaxError: function statement requires a name

我不知道为什么 JavaScript 会这样：

我的代码：

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>

我很想知道为什么这段代码会这样，谢谢。

Answer 1

alert("color changed") 中的第一个引号与 onclick=" 中的引号匹配，因此它结束了属性。

在属性中使用单引号，使其与属性定界符不匹配。

然后您需要确保这不会与分隔整个 HTML 字符串的引号冲突。您可以转义单引号，但一个简单的解决方案是使字符串成为模板文字。

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>

您可以通过使用 DOM 对象而不是 HTML 字符串和内联 JavaScript.

来避免所有这些引用问题

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>

function return 'Uncaught SyntaxError: expected expression, got }' error in onClick event

function return 'Uncaught SyntaxError: expected expression, got }' error in onClick event

html

javascript

ecmascript-6