J'ai suivi un didacticiel en ligne sur la façon de créer un panier d'achat en utilisant javascript et maintenant face à une erreur lorsque je veux ajouter le premier article au panier. je reçois et erreur de

Impossible de lire la propriété 'push' de null

Et le code essaie d'ajouter un élément à la liste du tableau du panier j'ai essayé de déboguer le code et je peux voir qu'il y a de la valeur dans le tableau mais j'obtiens toujours une erreur

La partie qui montre une erreur est

// add item to the cart with name , price , count 
    function addItem(name , price , count)
    {
        for (var i in cart)// loop the cart 
        {
            if (cart[i].name === name)// check the name we want to enter with the name in cart
                {
                    cart[i].count += count;
                    return;
                }
        }
        var item = new Item (name , price , count);

        alert(item);
        console.log(item);
        cart.push (item);// **getting an error in here** 
        saveCart ();

    }

Le code complet est:

<html>
<head>
    <title>Shopping Cart</title>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
  <h1>Shopping Cart</h1>  
    <div>
        <ul>
            <li><a class ="addtoCart" href="#" data-name="apple" data-price="1.22">Apple</a></li>
            <li><a class ="addtoCart" href="#" data-name="orange" data-price="2.22">Orange</a></li>
            <li><a class ="addtoCart" href="#" data-name="banana" data-price="3.22">Banana</a></li>
            <li><a class ="addtoCart" href="#" data-name="kiwi" data-price="4.22">Kiwi</a></li>
        </ul>
        <button id="cleareCart">Clear Cart</button>
    </div>
    <div>
        <ul id="showCart"></ul>

    </div>
<script>
    //jQuery 
    $(".addtoCart").click(function(event)
        { 
            event.preventDefault();
            var name = $(this).attr("data-name");
            var price = Number($(this).attr("data-price"));
            addItem(name , price, 1);
            displayCart();
        }                                            
    );
    function displayCart ()
    {
        var CartArray = listCart ();
        var outPut = "";
        for (var i in CartArray)
            {
                outPut += "<li>"+CartArray[i].name+" "+ CartArray[i].count+"</li>"
            }
        $("#showCart").html(outPut);
    }

    //******************************************Javascript/// shopping cart functions 
var cart =[];// this is array that contain all the shopping cart item
    // we need to display:
    /*name ,price,count, id */
    var Item =function (name , price , count)// add item to the cart array 
    {
        this.name = name
        this.price = price
        this.count = count
    }
    /*Cart Functions : what are cart need to do 

     load the cart ()// load from localstorage 
    */
    // add item to the cart with name , price , count and id of the item
    function addItem(name , price , count)
    {
        for (var i in cart)// loop the cart 
        {
            if (cart[i].name === name)// check the name we want to enter with the name in cart
                {
                    cart[i].count += count;
                    return;
                }
        }
        var item = new Item (name , price , count);

        alert(item);
        console.log(item);
        cart.push (item);
        saveCart ();

    }
    //remove the item from the cart with name, price , count , id  (one item only)
    function removeItemFromCart (name, count)
    {
        for (var i in cart)// loop the cart
            {
                if (cart[i].name === name)// check the name of the item with the item in cart
                    {
                        cart[i].count = cart[i].count-count;
                        if (cart[i].count === 0 )
                            {
                               cart.splice(i,1);
                            }
                        break;
                    }
            }
        saveCart ();
    }
    //remove the item from cart all (name) this will remove all of the item name
    function removeAllItem (name)// remove all of the one item from cart (if the count is more than one )
    {
        for (var i in cart)// loop the cart
            {
                if (cart[i].name === name)// check the name of the item with the item in cart
                    {
                        cart.splice(i,1);
                        break;
                    }
            }
        saveCart ();
    }
    function clareCart ()// remove everything from the cart
    {
        cart = [];
        saveCart ();
    }
    function countCart ()// return the total cumber of the items in the cart
    {
        var totalCount = 0 ;
        for (var i in cart )
            {
                totalCount += cart[i].count; 
            }
        return totalCount;
    }
    function totalCartCost ()
    {
        var totalCost = 0 ;
        for (var i in cart )
            {
                totalCost += cart[i].price;
            }
        return totalCost;
    }
    function listCart ()//array of items  // array of the cart that we can use to generate HTML
    {
        var cartCopy = [];
        for (var i in cart)
            {
                var item = cart[i];
                var itemCopy = {};
                for (var p in item)
                    {
                        itemCopy[p] = item[p];
                    }
                cartCopy.push (itemCopy);
            }
        return cartCopy;
    }
    function saveCart ()// localstorage 
    {
        localStorage.setItem("testCart", JSON.stringify(cart));
    }
    function loadCart ()// load the cart 
    {
        cart = JSON.parse(localStorage.getItem("testCart"));
    }
    //addItem('', null , null );
   // addItem('apple',1.22 , 1);
   // addItem('apple',1.22 , 1);
   // addItem('apple',1.22 , 3);
   // addItem('orange',1.22 , 3);

    //console.log(cart);
   // console.log(cart);
    //removeAllItem('apple');
   // console.log(cart);
   // console.log (countCart()) ;

    //console.log (listCart());

    loadCart();
    var Array = listCart();
    console.log (Array);
    </script>
    </body>

Toute aide serait appréciée

-1
Reza Del 5 mars 2016 à 23:24

3 réponses

Meilleure réponse

Vous n'avez pas de tableau de panier. Essaye ça. travaillé pour moi.

<html>
<head>
    <title>Shopping Cart</title>
    <script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
</head>
<body>
  <h1>Shopping Cart</h1>  
    <div>
        <ul>
            <li><a class ="addtoCart" href="#" data-name="apple" data-price="1.22">Apple</a></li>
            <li><a class ="addtoCart" href="#" data-name="orange" data-price="2.22">Orange</a></li>
            <li><a class ="addtoCart" href="#" data-name="banana" data-price="3.22">Banana</a></li>
            <li><a class ="addtoCart" href="#" data-name="kiwi" data-price="4.22">Kiwi</a></li>
        </ul>
        <button id="cleareCart">Clear Cart</button>
    </div>
    <div>
        <ul id="showCart"></ul>

    </div>
<script>
    //jQuery 
    $(".addtoCart").click(function(event)
        { 
            event.preventDefault();
            var name = $(this).attr("data-name");
            var price = Number($(this).attr("data-price"));
            addItem(name , price, 1);
            displayCart();
        }                                            
    );
    function displayCart ()
    {
        var CartArray = listCart ();
        var outPut = "";
        for (var i in CartArray)
            {
                outPut += "<li>"+CartArray[i].name+" "+ CartArray[i].count+"</li>"
            }
        $("#showCart").html(outPut);
    }

    //******************************************Javascript/// shopping cart functions 
var cart =[];// this is array that contain all the shopping cart item
    // we need to display:
    /*name ,price,count, id */
    var Item =function (name , price , count)// add item to the cart array 
    {
        this.name = name
        this.price = price
        this.count = count
    }
    /*Cart Functions : what are cart need to do 

     load the cart ()// load from localstorage 
    */
    // add item to the cart with name , price , count and id of the item
    function addItem(name , price , count)
    {
        if(cart == null)
            cart = [];
        for (var i in cart)// loop the cart 
        {
            if (cart[i].name === name)// check the name we want to enter with the name in cart
                {
                    cart[i].count += count;
                    return;
                }
        }
        var item = new Item (name , price , count);

        alert(item);
        console.log(item);
        cart.push (item);
        saveCart ();

    }
    //remove the item from the cart with name, price , count , id  (one item only)
    function removeItemFromCart (name, count)
    {
        for (var i in cart)// loop the cart
            {
                if (cart[i].name === name)// check the name of the item with the item in cart
                    {
                        cart[i].count = cart[i].count-count;
                        if (cart[i].count === 0 )
                            {
                               cart.splice(i,1);
                            }
                        break;
                    }
            }
        saveCart ();
    }
    //remove the item from cart all (name) this will remove all of the item name
    function removeAllItem (name)// remove all of the one item from cart (if the count is more than one )
    {
        for (var i in cart)// loop the cart
            {
                if (cart[i].name === name)// check the name of the item with the item in cart
                    {
                        cart.splice(i,1);
                        break;
                    }
            }
        saveCart ();
    }
    function clareCart ()// remove everything from the cart
    {
        cart = [];
        saveCart ();
    }
    function countCart ()// return the total cumber of the items in the cart
    {
        var totalCount = 0 ;
        for (var i in cart )
            {
                totalCount += cart[i].count; 
            }
        return totalCount;
    }
    function totalCartCost ()
    {
        var totalCost = 0 ;
        for (var i in cart )
            {
                totalCost += cart[i].price;
            }
        return totalCost;
    }
    function listCart ()//array of items  // array of the cart that we can use to generate HTML
    {
        var cartCopy = [];
        for (var i in cart)
            {
                var item = cart[i];
                var itemCopy = {};
                for (var p in item)
                    {
                        itemCopy[p] = item[p];
                    }
                cartCopy.push (itemCopy);
            }
        return cartCopy;
    }
    function saveCart ()// localstorage 
    {
        localStorage.setItem("testCart", JSON.stringify(cart));
    }
    function loadCart ()// load the cart 
    {
        cart = JSON.parse(localStorage.getItem("testCart"));
    }
    //addItem('', null , null );
   // addItem('apple',1.22 , 1);
   // addItem('apple',1.22 , 1);
   // addItem('apple',1.22 , 3);
   // addItem('orange',1.22 , 3);

    //console.log(cart);
   // console.log(cart);
    //removeAllItem('apple');
   // console.log(cart);
   // console.log (countCart()) ;

    //console.log (listCart());

    loadCart();
    var Array = listCart();
    console.log (Array);
    </script>
    </body>

Je viens d'ajouter à la ligne 60

if(cart == null)
    cart = [];
1
Want to be deleted 5 mars 2016 à 21:41

J'ai trouvé mon propre problème après 5 jours de lecture du code

  function loadCart ()// load the cart 
    {
        cart = JSON.parse(localStorage.getItem("testCart"));

    }

Charger le panier essaie de charger un fichier Json qui n'existe pas encore et puis il n'y a pas de panier, donc cela me donne une erreur

Pour arranger ça j'ajoute ça

        function loadCart ()// load the cart 
    {
        cart = JSON.parse(localStorage.getItem("testCart"));
         if (cart === null) {
             cart = [];
            }
    }
1
Reza Del 5 mars 2016 à 20:31

Je corrige le problème avec le code. Je dois enregistrer le panier avant de pouvoir le charger!

    myList93.saveCart();
    myList93.loadCart();
    displayCart();
1
Adam 11 déc. 2016 à 14:03