始终显示点击次数答案

【问题标题】：Always show click-count始终显示点击次数
【发布时间】：2018-11-18 13:27:50
【问题描述】：

我一直在尝试为网页创建一个点赞计数器。目前，它只显示有人按下按钮时的点赞数。代码写在下面。

<!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!

请帮帮我 - 非常感谢您阅读

【问题讨论】：

您想在页面加载后立即显示喜欢的内容？
是的 - 所有以前累积的喜欢必须始终显示

标签： html web button

【解决方案1】：

您必须先显示计数器，然后在每次更改时进行跟踪。

<!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>

【讨论】：

你也可以这样做并避免第二个脚本标签。干杯！