Подсчет нажатий клавиш и отображение их в HTML - PullRequest
Новая
       53

Подсчет нажатий клавиш и отображение их в HTML

0 голосов
/ 19 декабря 2018

Я сделал простую «симулятор пробела» с HTML и Javascript.Каждый раз, когда пользователь нажимает пробел, изображение заменяется другим, а когда клавиша отпускается, оно сбрасывается на исходное изображение.

Я хотел бы добавить на страницу счетчик, который подсчитывает количествораз пользователь нажал пробел.Исходный код ниже: 

var myRealUrl = "./assets/spacebar.png";
$("body").on("keydown", function (e) {
  if(e.which == 32){   
    $("#spacebar").attr("src", "./assets/spacebar_pressed.png")
  }
});

$("body").keyup(function (e) {
    $("#spacebar").attr("src", myRealUrl)
});

var button = document.getElementById('counter'),
  count = 0;
button.onclick = function() {
  count += 1;
  button.innerHTML = "Click me: " + count;
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="js/jquery-3.2.1.min.js"></script>

</head>

<body>
    <div class="container">
        <div class="title">
            <h1>Spacebar Simulator 2018</h1>
            <span id="counter"><p></p></span>
        </div>
        <img src="assets/spacebar.png" id="spacebar">
		<p>Pressed</p><p id="counter">0</p><p> times.</p>

        <footer>
            <p>&copy; 2018</p>
        </footer>
    </div>
    <script src="js/spacebar.js"></script>
</body>

</html>

1 Ответ

0 голосов
/ 19 декабря 2018

Итак, установите переменную уровня страницы и увеличьте ее в обработчике событий keydown.

Ваша попытка кода нажатия кнопки не сработала, потому что элемент p, который необходимо былоУ clicked не было содержимого, поэтому он не отображался на экране, и поэтому было нечего нажимать.

Кроме того, вы не можете иметь более одного элемента с одинаковыми id иневерно помещать p внутри span. 

var counter = 0;  // Variable to hold the count
var myRealUrl = "./assets/spacebar.png";
var count = document.getElementById('counter');
$("body").on("keydown", function (e) {
  if(e.which == 32){   
    counter++; // Increment the counter
    $("#spacebar").attr("src", "./assets/spacebar_pressed.png");
    count.textContent = counter; // Log the count
  }
});

$("body").keyup(function (e) {
    $("#spacebar").attr("src", myRealUrl)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="sv">

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300,400" rel="stylesheet">
    <link rel="stylesheet" href="css/stylesheet.css">
    <script src="js/jquery-3.2.1.min.js"></script>

</head>

<body>
    <div class="container">
        <div class="title">
            <h1>Spacebar Simulator 2018</h1>
        </div>
        <img src="assets/spacebar.png" id="spacebar">
		<p>Pressed <span id="counter">0</span> times.</p>

        <footer>
            <p>&copy; 2018</p>
        </footer>
    </div>
    <script src="js/spacebar.js"></script>
</body>

</html>
...