Question

我正在学习使用事件侦听器，我想登录日志并按下控制台上的“开始”按钮以确保该按钮可以正常工作，但是在测试.html文件时我没有得到任何结果开发工具。

我已验证index.js文件中引用的.html名称是否相同
我已经尝试了标题中的源代码
在src=index.js之前，我已经通过Google将</body> jQuery库添加到了底部
我已将代码复制到 repl.it ，以尝试其他环境

JAVASCRIPT：

function startQuiz() {
    $('#startButton').click(function(event){
        console.log("Keep Going");
    });
}

HTML：

<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Herbal Medicine: Adaptogens</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <link rel="questions" href="store.html">
</head>
<body>
    <div class="container">
        <p>Intro to Herbal Adaptogens explaining what they are</p>
        <button id="startButton">Start</button>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

我希望当我按“开始”键时，控制台中会显示“ Keep Going”，但什么也没发生。

Answer 1

您在click()函数内部具有JQuery startQuiz()函数。因此，除非首先运行外部函数（startQuiz()），否则它不会起作用。您应该将其放在ready函数中，以便在页面“就绪”后立即加载。

将您的JavaScript更改如下：

$(document).ready(function() {
    $('#startButton').click(function(event) {
        console.log("Keep Going");
    });
});

Answer 2

您应该将其放在Jquery click函数中。这样，它将在文档加载时触发。

$(document).ready(function() {
    $('#startButton').click(function(event) {
        console.log("Keep Going");
    }
});

Answer 3

无需使用jQuery，您只需使用js事件即可。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Log Window</title>
</head>
<body>
  <script>
  function logMe() {console.log('clicked');}
  </script>
  <button onclick="logMe()">logMe</button>
</body>
</html>

当我按开始时，为什么我的console.log消息没有显示？

3 个答案: