购物购物车问题

Question

我是一个真正的初学者，所以请耐心等待 我有一个任务是创建一个HTML购物页面，以显示具有“添加到购物车”按钮的项目，这应该将所有项目保存到local storage。然后，我必须使用导航栏上的购物车按钮，该按钮会显示另一个显示购物车的HTML页面 我有一些问题。也就是说，我在将addToCart函数附加到第一个HTML页面上的按钮时遇到问题，然后我不知道如何在我的导航栏中显示购物车图标旁边的购物车中的项目数量，最后，如何我可以在新的HTML页面中显示购物车吗？ 任何帮助表示赞赏

我的代码在

下面

＆＃13;

＆＃13;

if (typeof(Storage) !== "undefined") {
  // Code for localStorage/sessionStorage.
} else {
  // Sorry! No Web Storage support..
}

function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      //   document.getElementById("").innerHTML = this.responseText;
      console.log(JSON.parse(this.responseText))
      return JSON.parse(this.responseText)
    }
  };
  xhttp.open("GET", " http://www.json-generator.com/api/json/get/bUVAaRLTKG?indent=2", true);
  xhttp.send();
}

// ***************************************************
// Shopping Cart functions

var shoppingCart = (function() {
  // Private methods and properties
  var cart = [];

  function Item(name, price, count) {
    this.name = name
    this.price = price
    this.count = count
  }

  function saveCart() {
    localStorage.setItem("shoppingCart", JSON.stringify(cart));
  }

  function loadCart() {
    cart = JSON.parse(localStorage.getItem("shoppingCart"));
    if (cart === null) {
      cart = []
    }
  }

  loadCart();



  // Public methods and properties
  var obj = {};

  obj.addItemToCart = function(name, price, count) {
    for (var i in cart) {
      if (cart[i].name === name) {
        cart[i].count += count;
        saveCart();
        return;
      }
    }

    var item = new Item(name, price, count);
    cart.push(item);
    saveCart();
  };

  obj.setCountForItem = function(name, count) {
    for (var i in cart) {
      if (cart[i].name === name) {
        cart[i].count = count;
        break;
      }
    }
    saveCart();
  };


  obj.removeItemFromCart = function(name) { // Removes one item
    for (var i in cart) {
      if (cart[i].name === name) { // "3" === 3 false
        cart[i].count--; // cart[i].count --
        if (cart[i].count === 0) {
          cart.splice(i, 1);
        }
        break;
      }
    }
    saveCart();
  };


  obj.removeItemFromCartAll = function(name) { // removes all item name
    for (var i in cart) {
      if (cart[i].name === name) {
        cart.splice(i, 1);
        break;
      }
    }
    saveCart();
  };


  obj.clearCart = function() {
    cart = [];
    saveCart();
  }


  obj.countCart = function() { // -> return total count
    var totalCount = 0;
    for (var i in cart) {
      totalCount += cart[i].count;
    }

    return totalCount;
  };

  obj.totalCart = function() { // -> return total cost
    var totalCost = 0;
    for (var i in cart) {
      totalCost += cart[i].price * cart[i].count;
    }
    return totalCost.toFixed(2);
  };

  obj.listCart = function() { // -> array of Items
    var cartCopy = [];
    console.log("Listing cart");
    console.log(cart);
    for (var i in cart) {
      console.log(i);
      var item = cart[i];
      var itemCopy = {};
      for (var p in item) {
        itemCopy[p] = item[p];
      }
      itemCopy.total = (item.price * item.count).toFixed(2);
      cartCopy.push(itemCopy);
    }
    return cartCopy;
  };

  // ----------------------------
  return obj;
})();

＆＃13;

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
  display: block;
}

body {
  line-height: 1;
}

ol,ul {
  list-style: none;
}

blockquote,q {
  quotes: none;
}

blockquote:before,blockquote:after,q:before,q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.clearfix {
  display: block;
  content: "";
  clear: both;
}


/* globalna podesavanja*/

.black {
  background-color: #111;
}

.margin-top {
  margin-top: 35px;
}

.margin-bottom {
  margin-bottom: 35px;
}

padding {
  padding-bottom: 10px;
}

img {
  max-width: 100%;
}


/* moj css*/

body {
  background-color: aquamarine;
  font-size: 24px;
}

#proizvodi {
  width: 75%;
  background-color: mediumseagreen;
  border-radius: 35px;
  color: darkblue;
  margin: 50px;
  padding: 15px;
}

.plus-item,.subtract-item,.delete-item {
  background-color: purple;
  border-radius: 5px;
  width: 50px;
  color: black;
}

.box {
  display: grid;
  grid-gap: 50px;
  grid-template-columns: repeat(3, 200px);
}

#clear-cart {
  background-color: black;
  color: blue;
  border-radius: 15px;
  margin: 5px;
  padding: 15px;
}

#cartItems {
  width: 75%;
  background-color: mediumseagreen;
  margin: 50px;
  padding: 15px;
  border-radius: 35px;
  color: darkblue;
}

#itemNo,#totalCost {
  color: black;
  font-size: 24px;
  padding: 10px;
}

input {
  background-color: lightcoral;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

<script>
  $(document).ready(function() {

    // currentStorage = localStorage.getItem('shoppingCart')
    // currentStorage.push(newProduct)
    // localStorage.setItem('shoppingCart', currentStorage)
    var Proizvodi = []

    function loadDoc() {
      var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          //   document.getElementById("").innerHTML = this.responseText;
          Proizvodi = JSON.parse(this.responseText)
          proizvodi();
        }
      };
      xhttp.open("GET", " http://www.json-generator.com/api/json/get/bUVAaRLTKG?indent=2", true);
      xhttp.send();
    }
    loadDoc()


    function proizvodi() {

      var duzina = Proizvodi.length;
      var i = 0;
      var text = "<ul class='box'>";
      for (; i < duzina; i++) {
        text += "<li>" +
          "<img src='" + Proizvodi[i].picture + "' alt='slika' />" +
          "<p>" + Proizvodi[i].productName + "</p>" +
          "<p>" + Proizvodi[i].price + "</p>" +
          " <button class='plus-item' onclick='addItemToCart' data-name='" +
          Proizvodi[i].productName + "'>+</button></li>"
      }
      text += "</ul>"
      $("#proizvodi").append(text);
    }


  });
</script>
<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="row">
      <div class="navbar-header col-sm-6 col-md-6 col-lg-6">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toogle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

        <a class="navbar-brand" href="#">
                            Company Name
                        </a>
      </div>
      <div class="col-sm-6 col-md-6 col-lg-6">
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav navbar-rigth">
            <li class="active">
              <a href="proba.html">Home</a>
            </li>
            <li>
              <a href="#about">Products</a>
            </li>
            <li>
              <a href="#about">About Us</a>
            </li>
            <li>
              <a id="contact" href="#contact">Contact Us</a>
            </li>
            <li>
              <a id="cart" href="cart.html"><img src="../images/shopping-cart.png" />Your cart</a>

            </li>

          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>
<div id="proizvodi"></div>



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

＆＃13;

＆＃13;

＆＃13;