Попытка заставить мою кнопку щелчка показывать результаты всегда, а не только при нажатии - PullRequest
Новая
       41

Попытка заставить мою кнопку щелчка показывать результаты всегда, а не только при нажатии

0 голосов
/ 13 октября 2018

Прямо сейчас у меня есть кнопка щелчка (или кнопка «Мне нравится», это сердце изображения с именем .download png), которое отображает счетчик числа результатов кнопки щелчка только при нажатии на нее.Я пытаюсь заставить кнопку отображать результат все время, не только когда вы нажимаете на нее, но и на счетчик при нажатии.Вот код, который у меня есть в заголовке: 

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

А затем код тела: 

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

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

Ответы [ 2 ]

0 голосов
/ 13 октября 2018

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

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>
0 голосов
/ 13 октября 2018

Обратите внимание:

Чтобы получить значение в 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>
...