Как посчитать количество кликов

Question

Я использую всплывающую подсказку в своем блоге, которая закодирована с использованием CSS, а HTML - ее код. Я хочу отслеживать количество нажатий на всплывающую подсказку. Есть ли способ, с помощью которого я могу увидеть количество кликов, сделанных на нем. По возможности вид должен быть выгравирован в самой коробке (углу). Это код всплывающей подсказки

body{margin-top:50px}

.tooltip {
    display:inline-block;
    position:relative;
    border-bottom:2px solid #ff5733;
    text-align:left;
}

.tooltip {
    display:inline-block;
    position:relative;
    border-bottom:2px solid #ff5733;
    text-align:left;
}

.tooltip .right {
    min-width:80px; 
    top:50%;
    left:100%;
    margin-left:20px;
    transform:translate(0, -50%);
    padding:10px 20px;
    color:#444444;
    background-color:#EEEEEE;
    font-weight:normal;
    font-size:13px;
    border-radius:8px;
    position:absolute;
    z-index:99999999;
    box-sizing:border-box;
  border:3px solid #ff5733;box-shadow:0 1px 8px rgba(0,0,0,0.5);
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
    visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.tooltip:hover .right {
    visibility:visible; opacity:1;
}

.tooltip .right i {
    position:absolute;
    top:50%;
    right:100%;
    margin-top:-12px;
    width:12px;
    height:24px;
    overflow:hidden;
}

.tooltip .right i::after {
    content:'';
    position:absolute;
    width:12px;
    height:22px;
    left:0;
    top:50%;
    transform:translate(50%,-50%) rotate(-45deg);
    background-color:#EEEEEE;
   border:3px solid #ff5733;box-shadow:0 1px 8px rgba(0,0,0,0.5);
    box-shadow:0 1px 8px rgba(0,0,0,0.5);
}

<span class=" tooltip">trial view
        <span class="right toolTipWrap">
<a href="https://factsbyteinjournal.blogspot.com/2019/04/how-to-add-lazy-loader-for-images-in.html"><img alt="Lazy Loader" border="0" data-original-height="86" data-original-width="86" src="https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg"/></a>
              Read Now!
            <i></i>
        </span>
    </span>

Answer 1

Добавьте id="tooltip" к тегу и используйте этот скрипт. Переменная count будет содержать количество нажатий, и вы можете обрабатывать ее так, как вам удобно.

window.onload=function(){
  var count = 0
  var el = document.getElementById('tooltip').addEventListener("click", 
  function() {
    count++

   console.log(count)
  });
}

Answer 2

добавить атрибут onclick к вашему диапазону

     <span   id="clickme" onclick="clickme()" class=" tooltip">trial view
        <span  class="right toolTipWrap">
        <a  href="https://factsbyteinjournal.blogspot.com/2019/04/ho 
   w-to-add-lazy-loader-for-images-in.html"><img alt="Lazy 
   Loader" border="0" data-original-height="86" data- 
    original- 
       width="86" 
     src="https://onlinejpgtools.com/images/examples- 
    onlinejpgtools/coffee-resized.jpg"/></a>
           Read Now!
         <i></i>
       </span>
    </span>

    <script>
   var click = 0;
   function clickme(){

       click++;
    alert(click);
     }
   </script>

Answer 3

Я не могу написать код, потому что я нахожусь на моем телефоне, но вы должны создать переменную, в которой будет храниться значение для кликов, затем вы должны добавить прослушиватель событий во всплывающую подсказку, затем с помощью функции нажатия вы должны увеличить переменную на 1. Затем вы можете использовать данные из этой переменной, которые вы сделали, чтобы отобразить число. Удачи, надеюсь, я помог.

Answer 4

Используйте ниже код

var count=0;
$('#trialView').click(function(){
   count++;
   alert(count);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<span class=" tooltip">trial view
        <span class="right toolTipWrap" Id="trialView">
<a href="https://factsbyteinjournal.blogspot.com/2019/04/how-to-add-lazy-loader-for-images-in.html"><img alt="Lazy Loader" border="0" data-original-height="86" data-original-width="86" src="https://onlinejpgtools.com/images/examples-onlinejpgtools/coffee-resized.jpg"/></a>
              Read Now!
            <i></i>
        </span>
    </span>