Question

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />

<script>
  $(document).ready(function() {
  $('#getQuote').on("click", functon() {
    $('.message').html("Here is the message");
  });
});

</script>

<body>
  <div class="container-fluid">
    <div class="row text-center">
      <h1>Random Quote Machine</h1>
    </div>

    <div class="row text-center">
      <div class="well message">

        The quote will go here
      </div>
    </div>

    <div class="row text-center">
      <button id="getQuote" class="btn btn-primary">Get Quote </button>
    </div>
  </div>
</body>

您好我是编程新手，我使用codepen.io来完成此操作。我想知道为什么当我点击按钮＆＃34;获取消息＆＃34; div中的消息不会更改为新消息。顺便说一句，我正在学习通过freecodecamp进行编码，这段代码可以在freecodecamp的网站上运行，但不能在codepen上运行。所以我想知道我做错了什么。在codepen上，我得到的错误是＆＃34;意外的令牌{＆＃34;。任何帮助将不胜感激。

Answer 1

次要类型：functon（）！= function（）

您目前在事件处理程序中使用functon而不是function时会出现拼写错误，这将在语法上抛弃其他所有内容：

// Previously you had $('#getQuote').on("click",functon() {
$('#getQuote').on("click", function() {
    $('.message').html("Here is the message");
});

仔细检查jQuery是否被引用。

如果这还没有解决问题，那么您需要确保jQuery在使用它的任何代码之前引用：

＆＃13;

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<!-- Reference jQuery before any other scripts that rely on it -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
  $(document).ready(function() {
    $('#getQuote').on("click", function() {
      $('.message').html("Here is the message");
    });
  });
</script>

<body>
  <div class="container-fluid">
    <div class="row text-center">
      <h1>Random Quote Machine</h1>
    </div>

    <div class="row text-center">
      <div class="well message">

        The quote will go here
      </div>
    </div>

    <div class="row text-center">
      <button id="getQuote" class="btn btn-primary">Get Quote</button>
    </div>
  </div>
</body>

＆＃13;

Answer 2

好的，所以你使用的脚本是jQuery。要启用jQuery库，您必须在下面添加

将其添加到您的代码中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这将加载jQuery库供您在脚本中使用。

另一种方法是下载并引用其路径。

我已经尝试过运行你的代码，是的，正如Rion已经说过的那样，拼写错误导致了问题。将functon()更改为function()

作为一个新手，这是一个非常常见的错误。保持良好的工作！

单击按钮时，如何在div中更改文本？

2 个答案: