SyntaxError：预期的表达式，在字符 2 处得到 '}'答案

【问题标题】：SyntaxError: expected expression, got '}' at character 2SyntaxError：预期的表达式，在字符 2 处得到 '}'
【发布时间】：2018-12-22 14:34:29
【问题描述】：

我目前正在开发一个带有自己的自定义控制台的 cookie 点击器。它应该是一个 cookie 点击器克隆。商店或其他我还没有添加的东西。问题是，当您运行代码时，会出现一个名为

的错误

expected expression, got '}' [More Information] index.html:2

（完全复制自 firefox）奇怪的是，得到的“}”位于标签中的第二个使用字符处。它如何在标签中获得'}'？

代码如下：

//init
var clicks = 0;
var button = document.getElementById("clickme");
var consoleMsgs = 0;
var myConsole = document.getElementById('console');
consoleLog("Button clicker initiated!");

function buttonClick() {
  clicks++;
  consoleLog('You have ' + clicks + ' clicks!');
  button.value = 'Clicks: ' + clicks;
}

function consoleLog(t) {
  consoleMsgs++
  myConsole.children[1].innerHTML = '<p style="margin-bottom: 0;" id=' + consoleMsgs + '>' + t + '</p>' + myConsole.children[1].innerHTML;
}

input {
  border-style: solid;
  border-color: black;
  border-width: thick;
  border-radius: 3rem;
  background: #232328;
  margin-bottom: 0.2rem;
  color: #d3dde6;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Romgl</title>

  <!-- Bootstrap Dependencies -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

</head>

<body>

  <div id="content" style="font-size: 1.5rem; margin: 0.7ex">
    <div>
      <input id="clickme" value="Clicks: 0" style="display: block; width: 100%; height: 100px;" onclick="buttonClick();" type="submit">

      <input value="clear console" style="margin-right: 10px;" onclick="myConsole.children[1].innerHTML = " ";=" " consolemsgs="0; " consolelog('console=" " cleared!');"="" type="submit">

      <div id="console" style="font-size: 1.3rem;">
        <h1>Console</h1>
        <div class="consoleText">
        </div>
      </div>

    </div>

  </div>
  </div>



</body>

</html>

请帮帮我！

【问题讨论】：

看到这个onclick="myConsole.children[1].innerHTML = " ";=" " consolemsgs="0; " consolelog('console=" " cleared!');"="" ...这完全是垃圾
它可以是onclick="myConsole.children[1].innerHTML=''; consoleMsgs=0; consoleLog('cleared!');" 然后它工作，但是，使用onclick 属性最好留给20岁的代码
@JaromandaX 我想知道如果不使用onclick属性，我们现在应该使用什么，谢谢
好吧，如果你想使用onclick，最好使用它..不要'放置多个语句，调用一个函数......就像你在另一个onclick中所做的那样！！！ ...但是，请查看元素 addEventListener 方法以获得更好的代码

标签： javascript html typeerror

【解决方案1】：

您真的应该避免将 JS 放入 HTML 输入中。

您可以按照以下方式做一些事情：

//init
var clicks = 0;
var button = document.getElementById("clickme");
var consoleMsgs = 0;
var myConsole = document.getElementById('console');
consoleLog("Button clicker initiated!");

document.getElementById("clickme").addEventListener('click', function() {
  clicks++;
  consoleLog('You have ' + clicks + ' clicks!');
  button.value = 'Clicks: ' + clicks;
});

document.getElementById("clicktoclear").addEventListener('click', function(){
  myConsole.children[1].innerHTML='';
  consoleMsgs=0;
  consoleLog('cleared!');
});

function consoleLog(t) {
  consoleMsgs++
  myConsole.children[1].innerHTML = '<p style="margin-bottom: 0;" id=' + consoleMsgs + '>' + t + '</p>' + myConsole.children[1].innerHTML;
}

input {
  border-style: solid;
  border-color: black;
  border-width: thick;
  border-radius: 3rem;
  background: #232328;
  margin-bottom: 0.2rem;
  color: #d3dde6;
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>Romgl</title>

    <!-- Bootstrap Dependencies -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>

  </head>

  <body>

    <div id="content" style="font-size: 1.5rem; margin: 0.7ex">
      <div>
        <input id="clickme" value="Clicks: 0" style="display: block; width: 100%; height: 100px;"  type="submit">

        <input id="clicktoclear" value="clear console" style="margin-right: 10px;" type="submit">

        <div id="console" style="font-size: 1.3rem;">
          <h1>Console</h1>
          <div class="consoleText">
          </div>
        </div>

      </div>

    </div>
    <!-- Remove the extra </div> -->

  </body>

</html>

我刚刚将您在输入中的 JS 移到了实际的 JS 脚本中，并更正了您的代码以清除您的控制台。此外，我删除了您的 HTML 中的额外内容。

编辑：我刚刚删除了 jQuery 以切换到纯 JS 以匹配原始代码。

【讨论】：

谢谢，但真正的问题在于 onclick：onclick="myConsole.children[1].innerHTML = " ";=" " consolemsgs="0; " consolelog('console=" " cleared!');"="" 但我会记住的！
@Darxoon 是的，我知道，但由于 Jaromanda X 纠正了您在 cmets 中的错误，我正在详细说明您的后续问题，即如何避免使用 onclick ;)