CODEWITHSUNDEEP
javascriptjqueryhtmllocal-storage
Coding Enthusiast
Coding Enthusiast

Reputation: 117

JavaScript localStorage not working on first click

I have a page called category.html. I am trying to store value of category in JavaScript localStorage so that I can pass it to next html page. I am trying to pass the clicked element inside a cell as the value of category variable in localStorage, but it does not happen so on first click. It works after first click. What am I doing wrong? 

<html>

<!--
https://jsfiddle.net/vu9d9mzb/#&togetherjs=sgTRTjfJ0m
-->

<head>
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        function store() {
            var display = document.getElementById("result");
            $("a").click(function() {
                var nameOfCategory = $(this).attr("categoryName");
                nameOfCategory = String(nameOfCategory);
                if (typeof(Storage) !== "undefined") {
                    // Store
                    localStorage.setItem("category", nameOfCategory);
                    // Retrieve
                    var checkLocalStorage = localStorage.getItem("category");
                    display.innerHTML = "Value of checkLocalStorage variable: " + checkLocalStorage + "<br>";
                    //console.log("Value of checkLocalStorage variable: " + checkLocalStorage);
                } else {
                    displayMessage.innerHTML = "Sorry, your browser does not support Web Storage..." + "<br>";
                    //console.log("Sorry, your browser does not support Web Storage...");
                }
                display.innerHTML += "Value of nameOfCategory varaible: " + nameOfCategory + "<br>";
                //console.log("Value of nameOfCategory varaible: " + nameOfCategory);
            }); // end of a.click function
        }
    </script>
</head>

<body>

    <table>
        <tr>
            <th>Category</th>
        </tr>
        <tr>
            <td><a onclick=store() categoryName="Fruits">Fruits</a>
            </td>
        </tr>
        <tr>
            <td><a onclick=store() categoryName="Vegetables">Vegetables</a>
            </td>
        </tr>
        <tr>
            <td><a onclick=store() categoryName="Clothes">Clothes</a>
            </td>
        </tr>
    </table>

    <div id="result">
    </div>

</body>

</html>

If the code does not run here due to cross-origin problem, then here is jsfiddle link to it :- https://jsfiddle.net/vu9d9mzb/#&togetherjs=sgTRTjfJ0m

Upvotes: 1

Views: 1253

Answers (2)

Hunter Mitchell
Hunter Mitchell

Reputation: 7293

You are registering the click event only AFTER you call store. Store will be called, the event will be setup, then the click events will work, try this:

https://jsfiddle.net/ahp8tpzn/1

$(document).ready(function() {
    var display = document.getElementById("result");
    $("a").click(function() {
        var nameOfCategory = $(this).attr("categoryName");
        nameOfCategory = String(nameOfCategory);
        if (typeof(Storage) !== "undefined") {
            // Store
            localStorage.setItem("category", nameOfCategory);
            // Retrieve
            var checkLocalStorage = localStorage.getItem("category");
            display.innerHTML = "Value of checkLocalStorage variable: " + checkLocalStorage + "<br>";
            //console.log("Value of checkLocalStorage variable: " + checkLocalStorage);
        } else {
            displayMessage.innerHTML = "Sorry, your browser does not support Web Storage..." + "<br>";
            //console.log("Sorry, your browser does not support Web Storage...");
        }
        display.innerHTML += "Value of nameOfCategory varaible: " + nameOfCategory + "<br>";
        //console.log("Value of nameOfCategory varaible: " + nameOfCategory);
    }); // end of a.click function
});

Upvotes: 1

Taufik Akbar
Taufik Akbar

Reputation: 336

It's because you make that as a function store() and trigger it on click of the <a> element. Here's my edit to your code

<head>
 
</head>

<body>

    <table>
        <tr>
            <th>Category</th>
        </tr>
        <tr>
            <td><a href="#" categoryName="Fruits">Fruits</a>
            </td>
        </tr>
        <tr>
            <td><a href="#" categoryName="Vegetables">Vegetables</a>
            </td>
        </tr>
        <tr>
            <td><a href="#" categoryName="Clothes">Clothes</a>
            </td>
        </tr>
    </table>

    <div id="result">
    </div>
    
    <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
    <script>
        function activateLinks() {
            $("a").click(function(event) {
                event.preventDefault();
                
                var display = document.getElementById("result");
                var nameOfCategory = $(this).attr("categoryName");
                nameOfCategory = String(nameOfCategory);
                
                if (typeof(Storage) !== "undefined") {
                    // Store
                    localStorage.setItem("category", nameOfCategory);
                    // Retrieve
                    var checkLocalStorage = localStorage.getItem("category");
                    display.innerHTML = "Value of checkLocalStorage variable: " + checkLocalStorage + "<br>";
                    //console.log("Value of checkLocalStorage variable: " + checkLocalStorage);
                } else {
                    displayMessage.innerHTML = "Sorry, your browser does not support Web Storage..." + "<br>";
                    //console.log("Sorry, your browser does not support Web Storage...");
                }
                display.innerHTML += "Value of nameOfCategory varaible: " + nameOfCategory + "<br>";
                //console.log("Value of nameOfCategory varaible: " + nameOfCategory);
            }); // end of a.click function
        }
        
        activateLinks();
    </script>

</body>

Upvotes: 1

Related Questions