试图让我的点击按钮始终显示结果，而不仅仅是在点击时

Question

现在我有一个点击按钮（或 "like" 按钮，它是一个名为 .download png 的图像心脏），当您点击它时，它只显示点击按钮结果数计数器。我试图让按钮始终显示结果，不仅仅是在您单击它时，而且在单击时仍然在柜台上增加一个。这是我目前在 header 中的代码：

<script>
function clickCounter() {
    if(typeof(Storage) !== "undefined") {
        if (localStorage.firstButtonCount) {
            localStorage.firstButtonCount = Number(localStorage.firstButtonCount)+1;               
        } else {
            localStorage.firstButtonCount = 1; 
        }
        document.getElementById("result").innerHTML = localStorage.firstButtonCount; 
    } else {
        document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
    }

}
</script>

然后是 body 代码：

<p>
    <button type="button" onclick="clickCounter()">
        <div class="number" id="result"></div>
        <img src="download.png" width="50px" height="auto class="clickCounter()" type="button alt="Like"/>
    </button>
</p>

我不确定我做错了什么，但如果有人能告诉我如何始终显示结果，那就太棒了！

Answer 1

请注意：

要在 localStorage 中获取值，您可以使用方法 getItem。

要在 localStorage 中添加一个值，您可以使用方法 setItem。

参考这篇文章了解更多https://www.taniarascia.com/how-to-use-local-storage-with-javascript/

用下面的代码替换您的代码：

<!DOCTYPE html>
            <html lang="pt-br">
            <meta charset="utf-8" />

            <head>
                <title>Vote</title>

            </head>

            <body>
                <p>
                    <button type="button" onclick="clickCounter()">
                        <div class="number" id="result"></div>
                        <img src="https://cdn4.iconfinder.com/data/icons/like-18/32/459-01-512.png" width="50px" height="auto" type="button" alt="Like" />
                    </button>
                </p>
                <script type="text/javascript">
                    var resultElement = document.getElementById('result');

                    function updateResult() {

                        resultElement.innerText = parseInt(localStorage.getItem('firstButtonCount')) || 0;;

                    }

                    function vote() {
                        // body...
                        newCount = parseInt(localStorage.getItem('firstButtonCount')) + 1 || 0 + 1;

                        localStorage.setItem('firstButtonCount', newCount);

                    }

                    function clickCounter() {
                        if (typeof(Storage) !== "undefined") {

                            /*
                            to get a value in localStorage ,  you use the method getItem
                            to add a value in localStorage , you use the method setItem
                            */

                            vote();
                            updateResult();

                        } else {
                            document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
                        }
                    }

                    updateResult();
                </script>
            </body>

            </html>

Answer 2

我已经为你做了一个片段示例，因为安全违规我不能使用本地存储功能，但你可以在你的本地开发框架上启用它并丢弃全局计数器。

var _globalCounter = 0;
document.getElementById("result").innerHTML = _globalCounter;

function clickCounter()
{
    _globalCounter++;
    document.getElementById("result").innerHTML = _globalCounter;

    // This don't work on snippet because security violation,
    // but it should work on you local development framework.

    /*
    if (typeof(Storage) === "undefined")
    {
        alert("Browser don't support local storage");
        return;
    }
    
    var count = Number(localStorage.getItem("firstButtonCount"));

    if (count && count > 0)
    {
        count++;
        localStorage.setItem("firstButtonCount", count);
    }
    else
    {
        localStorage.setItem("firstButtonCount", 1);
    }

    document.getElementById("result").innerHTML = localStorage.getItem("firstButtonCount");
    */
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

<button type="button" onclick="clickCounter()">    
    <i class="far fa-2x fa-thumbs-up"></i>
    <spam class="number" id="result"></spam>
</button>

试图让我的点击按钮始终显示结果，而不仅仅是在点击时

Trying to make my click button show results at all times not just when clicked

javascript

counter

click

button

display