Как считать клики случайных изображений? - PullRequest
Новая
       54

Как считать клики случайных изображений?

0 голосов
/ 13 апреля 2020

Я пытаюсь создать случайную последовательность, вызываемую щелчком мыши, и отслеживать, сколько раз пользователь нажимал на изображения. Может ли кто-нибудь помочь мне с этим? Спасибо! Ниже приведен мой код, который выбирает изображения случайным образом: 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>The Door Moment</title>

    <script type="text/javascript">

        function changePic()
        {
            var num = Math.ceil(Math.random()*9);
            document.getElementById("p").src =  num + ".jpg";
        }
        function buttonclick() {
            document.getElementById("p").value++;
    }
    </script>
</head>
<body>
    <p align="center"><img src = "1.jpg" id = "p" width="400px" height="600px" onclick="changePic()" /></p>
  </div>

</body>

Ответы [ 2 ]

0 голосов
/ 13 апреля 2020

попробуйте сделать clickCounter объект с ключом, равным номеру изображения, и лучше использовать метод onclick в JS, но не в html 

let num = 1;
const clickCounter = {};
const randomPic = document.getElementById('randomPic')

randomPic.onclick = function(){
    clickCounter[num] = (clickCounter[num] || 0) + 1;
    changePic();
    console.log(clickCounter); // if you need  
}

function changePic() {
    num = Math.ceil(Math.random()*9);
    randomPic.src = num + ".jpg";
}
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>The Door Moment</title>
</head>
<body>
    <p align="center"><img src = "1.jpg" id = "randomPic" width="400px" height="600px"/></p>
</body>
</html>
0 голосов
/ 13 апреля 2020

Предположим, что вы начинаете последовательность изображений с 1, вы можете использовать счетчик для подсчета времени нажатия изображения.

При нажатии на элемент изображения функция clickclick будет отслеживать, сколько раз пользователь нажал на изображение. А затем измените текущий порядковый номер изображения, которое будет отображать другое изображение. 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>The Door Moment</title>

    <script type="text/javascript">
    
        const counter = {};
        let num = 1;
        

        function changePic()
        {
            num = Math.ceil(Math.random()*9);
            document.getElementById("p").src =  num + ".jpg";
        }
        function buttonclick() {
            counter[num] = (counter[num] || 0) + 1;
            console.log(counter)
            //if you want to show current count for the sequence, you can use     console.log(counter[num])
            changePic()
    }
    </script>
</head>
<body>
    <p align="center"><img src = "1.jpg" id = "p" width="400px" height="600px" onclick="buttonclick()" /></p>
  </div>

</body>
...