如何让我的 JavaScript 计数器显示？

Question

I have this great JavaScript counter that works perfect. The only issue is that the actual information doesn't show up until the button is clicked first. But I want the counter & other text to constantly display and update as the buttons are being clicked.

What am I missing here?

JavaScript:

<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 + " <br>Subscribers So Far! And...<br>" + (1500 - +localStorage.clickcount) + "<br>Subscribers To Go" ;
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }
}
</script>

HTML:

<p><button onclick="clickCounter()" id="paypal-btn1" type="button">Click me!</button></p>
<p><button onclick="clickCounter()" id="paypal-btn2" type="button">Click me!</button></p>
<p><button onclick="clickCounter()" id="paypal-btn3" type="button">Click me!</button></p>
<div id="result"></div>

Answer 1

Check this out. Create another function to display the information then call it when the page load. Then call this function again when the counter increment when clicked the button.

<script>
    displayInformation(); 
    function displayInformation() {
            document.getElementById("result").innerHTML = "" + localStorage.clickcount + " <br>Subscribers So Far! And...<br>" + (1500 - +localStorage.clickcount) + "<br>Subscribers To Go" ;
    }
    function clickCounter() {
        if(typeof(Storage) !== "undefined") {
            if (localStorage.clickcount) {
                localStorage.clickcount = Number(localStorage.clickcount)+1;
            } else {
                localStorage.clickcount = 1;
            }
        displayInformation();/*Call this to refresh the click information*/
        } else {
            document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
        }
    }
</script>

See here jsfiddle

Answer 2

在您的函数下添加 clickCounter() 以便它将在加载时执行。