मैं इस होमवर्क असाइनमेंट पर कुछ समय से काम कर रहा हूं, और मैं फंस गया हूं।

एचटीएमएल फ़ाइल

<html>
<head>
    <title>Web Storage Tester</title>
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="stylesheet" media="screen" href="../../css/snippets.css" />
    <script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../../js/json2.js"></script>
    <script type="text/javascript" src="../../js/prowebapps.js"></script>
    <script type="text/javascript" src="webstorage-test.js"></script>
</head>
<body>
    <h1 class="fancy">&lt;Web Storage &gt; Web Storage JSON Wrapper</h1>
    <ul id="items">
        <li class="header">Items in Storage (tap to remove)</li>
    </ul>
    <ul id="newitem">
        <li class="header">New Item</li>
        <li class="bordered"><input type="text" id="newtitle" placeholder="Title" /></li>
    </ul>
    <ul id="actions">
        <li><button id="add"> Add </button></li>
        <li><button id="clear">Clear</button></li>
    </ul>
</body>
</html>

जावास्क्रिप्ट फ़ाइल

$(document).ready(function() {
    // read the data from local storage for the items
    var items = PROWEBAPPS.Storage.get("listitems");
    var loadTicks = new Date().getTime();

    function displayItems() {
        loadTicks = new Date().getTime();

        $("#items li[class!='header']").remove();
        if (items) {
            // create list items to display the current items
            for (var ii = 0; ii < items.length; ii++) {
                var itemAge = Math.floor((loadTicks - items[ii].created) / 1000);
                $("#items").append("<li>" + items[ii].title + " (created " + itemAge + "s ago)</li>");
            } // for
        }
        else {
            $("#items").append("<li>No items</li>");

            // initialise the items array
            items = [];
        } // if..else
    } // displayItems


    $(document.getElementById.("#add")).addbutton(function(){
    //function addbutton(){
        alart("Added");
        items.push({
            title: $("#newtitle").val();
            created: new Date().getTime();
        });

        PROWEBAPPS.Storage.set("listitems", items);
        displayItems();
    });

    $("#clear").click(function() {
        alart("Clear");
        items = null;
        PROWEBAPPS.Storage.remove("listitems");
        displayItems();
    });

    displayItems();
});

मेरे बटन काम नहीं कर रहे हैं। मैंने किताब में उस विधि का इस्तेमाल किया और जो मैं ऑनलाइन खोजने में सक्षम था और यह अभी भी काम नहीं कर रहा है। मैंने स्रोत फ़ाइलों की जाँच की, और वे सही हैं क्योंकि मेरी CSS फ़ाइल काम कर रही है। क्या हो रहा है पर कोई विचार?

0
Eric Kidder 6 अप्रैल 2017, 07:06

2 जवाब

सबसे बढ़िया उत्तर

fiddle देखें

एचटीएमएल

<h1 class="fancy">&lt;Web Storage &gt; Web Storage JSON Wrapper</h1>
    <ul id="items">
        <li class="header">Items in Storage (tap to remove)</li>
    </ul>
    <ul id="newitem">
        <li class="header">New Item</li>
        <li class="bordered"><input type="text" id="newtitle" placeholder="Title" /></li>
    </ul>
    <ul id="actions">
        <li><button id="add"> Add </button></li>
        <li><button id="clear">Clear</button></li>
    </ul>

jQuery

// read the data from local storage for the items

var items = [];
var loadTicks = new Date().getTime();

    function displayItems() {
        loadTicks = new Date().getTime();  
        //items =localStorage.getItem("listitems");
        items= JSON.parse(localStorage.getItem("listitems"));
        $("#items li[class!='header']").remove();
        if (items) {
            // create list items to display the current items
            for (var ii = 0; ii < items.length; ii++) {
            if(typeof items[ii].title !== 'undefined')
            {
                var itemAge = Math.floor((loadTicks - items[ii].created) / 1000);
                $("#items").append("<li>" + items[ii].title + " (created " + itemAge + "s ago)</li>");
            } // for
            }
        }
        else {
            $("#items").append("<li>No items</li>");
            items = [];
        } // if..else
    } // displayItems


    $("#add").click(function(){
        items.push({
            title: $("#newtitle").val(),
            created: new Date().getTime()
        });

        localStorage.setItem("listitems", JSON.stringify(items));
        displayItems();
        $("#newtitle").val('');
    });

    $("#clear").click(function() {
        alert("Clear");
        items.length = 0;
        localStorage.removeItem("listitems");
        displayItems();
    });

    displayItems();
0
RonyLoud 6 अप्रैल 2017, 08:05

बदलने का प्रयास करें

   $(document.getElementById.("#add")).addbutton(function(){
        ...
        });

साथ

$("#add").click(function(){
    ...
    });
0
Tej Patil 6 अप्रैल 2017, 07:21