Всегда показывать количество кликов - PullRequest
Новая
       4

Всегда показывать количество кликов

0 голосов
/ 18 ноября 2018

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

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        document.getElementById("result").innerHTML =localStorage.clickcount;
    } 
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button"  style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>



</body>
</html>

Я знаю, что .innerHTML - это проблема того, что «количество лайков» не отображается, но я не уверен, как сделать так, чтобы оно всегда отображалось ипо центру над кнопкой.

Например.Если на странице 143 лайков. 

    143 
Please Like!

Пожалуйста, помогите мне - Большое спасибо за чтение

1 Ответ

0 голосов
/ 18 ноября 2018

Сначала необходимо отобразить счетчик, а затем отслеживать каждый раз, когда он изменяется. 

<!DOCTYPE html>
<html>
<head>
<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.clickcount) {
            localStorage.clickcount = Number(localStorage.clickcount)+1;
        } else {
            localStorage.clickcount = 1;
        }
        showCounter();
    } 
}
function showCounter(){
    if(typeof(Storage) !== "undefined") {
        document.getElementById("result").innerHTML =localStorage.clickcount;
    }
}
</script>
</head>
<body>

<p><button onclick="clickCounter()" type="button"  style="background-image:url(URL TAKEN OUT DUE TO COPYRIGHT ISSUE); background-position:left; background-repeat:no-repeat; padding-left:30px; padding-top:4px; padding-bottom:4px; padding-right:4px" > Please Like! </button> </p>
<div id="result"></div>


<script>
   showCounter(); //Fisrt call, Once the page is loaded.
</script>
</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...