Javascript 无法读取属性'；名称'；未定义的。购物车_Javascript_Jquery_Html

Javascript 无法读取属性'；名称'；未定义的。购物车

javascript jquery html

Javascript 无法读取属性'；名称'；未定义的。购物车,javascript,jquery,html,Javascript,Jquery,Html,我正在尝试用JS实现一个简单的购物车 $('.addToCart').click(function(event) { event.preventDefault(); var name = $(this).data('name'); var price = Number($(this).data('price')); cart.addProduct(name, price, 1); }); 这是我的购物车 var cart = (function () { cartStora

我正在尝试用JS实现一个简单的购物车

$('.addToCart').click(function(event) {
  event.preventDefault();
  var name = $(this).data('name');
  var price = Number($(this).data('price'));
  cart.addProduct(name, price, 1);
});

这是我的购物车

var cart = (function () {
  cartStorage = [];

  function Product(name, price, count) {
    this.name = name;
    this.price = price;
    this.count = count;
  }
  var object = {};
  object.addProduct = function (name, price, count) {
    for (var i in cartStorage) {
      if (cartStorage[i].name == object.name) {
        cartStorage[i].count++;
        return;
      }
    }
    var newItem = Product(name, price, count);
    console.log(newItem);
    cartStorage.push(newItem);
  }

它打印未定义时，我试图控制台日志它。如果我再单击一次按钮，它会显示“无法读取属性”名称

这是我典型的物品卡片块

            <div class="col-8 col-md-4 col-lg-3 card">
                <img src="https://picsum.photos/200?random=9">
                <div class="priceWrapper">
                    <input type="button" value="BUY" class = "addToCart" data-name = "Product #8" data-price = "0.001">
                    <p class="newPrice">0.001$ </p>
                    <p class="oldPrice"><strike>300$</strike></p>
                </div>
                <p class="item-name">Product #8 </p>
            </div>


0.001美元
300$
产品#8

试试这个

var newItem = new Product(name, price, count);

对对象构造函数中的新对象使用关键字

new

。

您正在这样做：

var object={}

，几行之后，这个：

object.name

当然你会得到一个错误。。。我不知道您试图做什么，但您必须先初始化该对象才能访问其上的任何属性

另一方面，将变量命名为“object”并不是一个好主意，请尝试为变量命名更有意义的名称。这将使您的代码对您和以后的其他开发人员都更具可读性。

我希望下面的代码可以给您一些提示


<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js">
  </script>

</head>

<body>

  <div class="col-8 col-md-4 col-lg-3 card">
    <img src="https://picsum.photos/200?random=9">
    <div class="priceWrapper">
      <input type="button" value="BUY" class="addToCart" data-name="Product #8" data-price="0.001">
      <p class="newPrice">0.001$ </p>
      <p class="oldPrice">
        <strike>3$</strike>
      </p>
    </div>
    <p class="item-name">Product #8 </p>
  </div>

  <div class="col-8 col-md-4 col-lg-3 card">
    <img src="https://picsum.photos/200?random=9">
    <div class="priceWrapper">
      <input type="button" value="BUY" class="addToCart" data-name="Product #9" data-price="0.002">
      <p class="newPrice">0.002$ </p>
      <p class="oldPrice">
        <strike>2$</strike>
      </p>
    </div>
    <p class="item-name">Product #8 </p>
  </div>

  <script type="text/javascript">

    var cart = (function () {

      const cartStorage = [];
      function Product(name, price, count) {
        this.name = name;
        this.price = price;
        this.count = count;
      }
      var object = {};
      object.addProduct = function (name, price, count) {
        var isProductAlredyInCart = false
        for (var i in cartStorage) {
          if (cartStorage[i].name == name) {
            cartStorage[i].count++;
            isProductAlredyInCart = true;
          }
        }
        if (!isProductAlredyInCart) {
          var newItem = new Product(name, price, count);
          cartStorage.push(newItem);
        }
        console.log(cartStorage);
      }
      return object;
    })();

    $('.addToCart').click(function (event) {
      event.preventDefault();
      var name = $(this).data('name');
      var price = Number($(this).data('price'));
      cart.addProduct(name, price, 1);
    });

  </script>

</body>

</html>


0.001美元

3$

产品#8
0.002美元

2$

产品#8
var cart=（函数（）{
常量存储=[]；
功能产品（名称、价格、数量）{
this.name=名称；
这个价格=价格；
this.count=计数；
}
var对象={}；
object.addProduct=函数（名称、价格、计数）{
var isProductAlredyInCart=false
用于（存储中的var i）{
if（cartStorage[i].name==name）{
cartStorage[i].count++；
isProductAlredyInCart=true；
}
}
如果（！isProductAlredyInCart）{
var newItem=新产品（名称、价格、数量）；
cartStorage.push（newItem）；
}
console.log（cartStorage）；
}
返回对象；
})();
$（'.addToCart'）。单击（函数（事件）{
event.preventDefault（）；
变量名称=$（this.data（'name'）；
var价格=数字（$（this）.data（'price'）；
cart.addProduct（名称、价格、1）；
});

您需要从购物车函数返回对象，来自@Hu的建议ỳnh Tu–n是完美的

我个人建议您首先对JS基础知识进行锐化处理，如

新的如何工作？、闭包等。
您的对象为空且未由产品对象分配，这就是为什么它会给您一个未查找错误的原因。@mahesh我如何修复它？它应该传递给methodJust add object=新产品（名称、价格、计数）；在函数的第一行，但我会听你的advice@LordNani你在两个小时内走得相当远，哈哈。如果只是为了学习，那没什么大不了的，但即使你不为别人写作，也要练习这些东西，这样你就习惯了：）