Почему мое сообщение console.log не отображается, когда я нажимаю Пуск? - PullRequest
0 голосов
/ 03 октября 2019

Я учусь использовать прослушиватели событий, я хотел войти, нажав кнопку «Пуск» на консоли, чтобы убедиться, что кнопка работает, но я не получаю никаких результатов при тестировании файла .html в devtools.

  • Я подтвердил, что имя index.js, указанное в файле .html, совпадает с
  • Я попробовал исходный код в заголовке
  • Я добавил библиотеку src=index.js jQuery через Google внизу, прежде чем </body>
  • Я скопировал код в 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>

Я ожидаю, что на консоли появится сообщение «Продолжать движение», когда я нажимаю «Пуск», но вместо этого ничего не происходит ввсе.

Ответы [ 3 ]

1 голос
/ 03 октября 2019

У вас есть функция JQuery click() внутри функции startQuiz(). Так что это не будет работать, если внешняя функция (startQuiz()) не будет запущена первой. Вы должны поместить его в готовую функцию, чтобы она загружалась после того, как страница «готова».

Измените свой JavaScript, чтобы он выглядел так:

$(document).ready(function() {
    $('#startButton').click(function(event) {
        console.log("Keep Going");
    });
});
0 голосов
/ 03 октября 2019

Нет необходимости использовать 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>
0 голосов
/ 03 октября 2019

Вы должны поместить его в функцию щелчка Jquery. Таким образом, он будет срабатывать при загрузке документа.

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