Как получить работающий таймер обратного отсчета с кнопкой, добавляющей +1 к счетчику после каждого нажатия

Я создаю проект для класса, в котором мне нужно использовать jquery. Я остановился на проекте, в котором вы нажмете кнопку, счетчик увеличится на единицу и запустится таймер. Это будет похоже на игру, чтобы увидеть, как быстро вы можете щелкнуть за 10 секунд.

$("#button").mousedown(function () {
score = score + 1;
startTimer();
});

function startTimer() {
if (stop === 0) {
    stop = stop + 1;
    var counter = 0;
    var interval = setInterval(function () {
        counter++;
        display = 60 - counter;
        $("#button").html("Click! (" + display + " secs)");
        if (counter == 60) {
            alert("Times up!");
            clearInterval(interval);
            stop = 0;
            endscore = score;
            score = 0;
        }
    }, 1000);
}
};

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "clicks">
   <p><span>0</span></p>
</div>
<div class = "boxtext">
   <p>Time Remaining: <span>10</span> Seconds </p>
</div>
<div class = "but">
   <button type = "button" name = "button">Click</button>
</div>

Я ожидал, что таймер запустится, а счетчик увеличится на единицу, но ничего не происходит.

Нет элемента с id = "button", который ищет $("#button").

— 10.04.2019 13:57

И вместо mousedown используйте on() (JQuery несколько лет назад отказался от ярлыков событий) и событие click. Я искренне надеюсь, что ваш учитель не учил вас этому.

— 10.04.2019 14:01

Если это ваш весь код, то score не определен. Объявите его в глобальной области видимости, иначе произойдет ошибка.

— 10.04.2019 14:02

javascript jquery html

10.04.2019 13:54

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

155

Перейти к ответу Данный вопрос помечен как решенный

Ответы 5

Вы используете в качестве селектора идентификатор, однако ваш элемент кнопки не имеет этого идентификатора. Вы можете сделать следующее:

Добавьте идентификатор к этой кнопке.
Или вы можете изменить селектор как:

    $(".but").mousedown(function() { // or $('button[name = "button"]').mousedown(function() {...});
      score = score + 1;
      startTimer();
    });

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

— 10.04.2019 14:04

@MaheerAli от ОП: Я ожидал, что таймер запустится, а счетчик увеличится на единицу но вообще ничего не происходит. Теперь ОП должен начать работать над своим подходом.

— 10.04.2019 14:07

10.04.2019 13:59

Из вашего html у вас не было id = "button", поэтому используйте селектор имени или назначьте идентификатор кнопке.

Как показано ниже.

$("input[name='button']").mousedown(function() {
  score = score + 1;
  startTimer();
});

10.04.2019 14:03

Вы забыли инициализировать некоторые переменные и указать некоторые идентификаторы.

var score = 0
var stop = 0

$("#button").click(function () {
score = score + 1;
startTimer();
});

function startTimer() {
console.info('start timer')
if (stop === 0) {
    stop = stop + 1;
    var counter = 0;
    var interval = setInterval(function () {
    console.info('#interval')
        counter++;
        display = 60 - counter;
        $("#button").html("Click! (" + display + " secs)");
        if (counter == 60) {
            alert("Times up!");
            clearInterval(interval);
            stop = 0;
            endscore = score;
            score = 0;
        }
        
        $('#counter').html(counter)
    }, 1000);
}
};

<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "clicks">
        <p><span id = "counter">0</span></p>
      </div>
      <div class = "boxtext">
        <p>Time Remaining: <span>10</span> Seconds </p>
      </div>
    </div>
    <div class = "but">
      <button type = "button" id = "button">Click</button>
    </div>

Вы забыли инициализировать некоторые переменные и указать некоторые идентификаторы. << Ну какие? Хороший ответ должен объяснять его решение. И, пожалуйста, не публикуйте ссылки на Fiddles. Вы можете просто сделать фрагмент кода прямо здесь, в своем ответе.

— 10.04.2019 14:04

Скрипка не нужна.

— 10.04.2019 14:06

10.04.2019 14:04

Тебе следует:

Добавьте идентификатор к вашей кнопке:

<button id = "button" type = "button" name = "button">Click</button>

Также вам необходимо определить переменные score и stop глобально вне функции:

    var score = 0;
    var stop =  0;

10.04.2019 14:07

Ответ принят как подходящий

<!DOCTYPE html>
<html>
<head>
<script 
src = "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script>
$(document).ready(function(){

var score=0;
var stop=0;
var counter = 0;
var endscore=0;
$("button").mousedown(function () {

score = score + 1;
$("#score").text(score);
startTimer();
});

function startTimer() {
if (stop === 0) {
stop = stop + 1;
var interval = setInterval(function () {
    counter++;
    display = 60 - counter;
   // $("button").html("Click! (" + display + " secs)");
    if (counter == 60) {
        alert("Times up!");
        clearInterval(interval);
        stop = 0;
        endscore = score;
        score = 0;
    }
    $('#timeRemaining').text(display);
}, 1000);
}
};
});
</script>
</head>
<body>
<div class = "clicks">
<p><span id = "score">0</span></p>
</div>
<div class = "boxtext">
<p>Time Remaining: <span id = "timeRemaining">60</span> Seconds </p>
</div>
<div class = "but">
<button type = "button" name = "button">Click</button>
</div>
</body>
</html>

10.04.2019 14:43

Другие вопросы по теме

Как отобразить 4 разных фрагмента текста после определенных элементов списка и начать сначала

Создать объект File, используя путь к файлу

Расчет в jquery

Разделить и отобразить дочерний идентификатор из родительского идентификатора

Два видео Youtube в формате HTML5 на одной странице — Google Image proxy

Как создать несколько выпадающих списков выбора с помощью php

Функция задержки Div в JavaScript/JQuery

Передайте параметр в запросе Autocomplete AJAX

Вызов функции в div

Как запустить действие формы и щелкнуть событие одновременно при нажатии кнопки

Как получить работающий таймер обратного отсчета с кнопкой, добавляющей +1 к счетчику после каждого нажатия

Ответы 5

Другие вопросы по теме

Похожие вопросы