Uncaught ReferenceError: A615

1 
<!DOCTYPE html>

<html>

<head>

  <style>

  .header{

  display: inline-block;

  text-align: center;

  background-color: black;

  width: 30%;

  color: white;

  font-weight: bold;

}

.header1{

  display: inline-block;

  text-align: center;

  background-color: black;

  width: 20%;

  color: white;

  font-weight: bold;

}

.txt{

  display: inline-block;

  background-color: lightgrey;

  color: black;

  width: 30%;

  margin: 1px;

  text-align: center;

}

.txt1{

  display: inline-block;

  background-color: lightgrey;

  color: black;

  width: 20%;

  margin: 1px;

  text-align: center;

}

  </style>

</head>

<body>

  <div id = "demo"></div>

  <h2 id = "demo1">Cart has Empty</h2>

  <h3 id = "display"><h3>

</body>

<script>

 var products = [{id:'A441',name:'Pepsi',category:'Soft Drink', price:15, quantity:0},

{id:'B234',name:'Coke', category:'Soft Drink', price:10, quantity:0},

{id:'A617',name:'Mirinda', category:'Soft Drink', price:20, quantity:0},

{id:'B003',name:'Sprite', category:'Soft Drink', price:16, quantity:0},

{id:'B225',name:'Minute Maid', category:'Soft Drink', price:25, quantity:0},

{id:'A742',name:'5Star', category:'Chocloate', price:10, quantity:0},

{id:'B388',name:'Appy', category:'Soft Drink', price:35, quantity:0},

{id:'A899',name:'Gems', category:'Chocloate', price:12, quantity:0},

{id:'B635',name:'KitKat', category:'Chocloate', price:15, quantity:0},

{id:'B408',name:'Perk', category:'Chocloate', price:8, quantity:0},

{id:'A354',name:'Dairy Milk', category:'Chocloate', price:30, quantity:0}]

  console.log(products);

  show();

  var countA = 0;

  var countB = 0;

  function Buy(index){

     countA += 1;

     var addedProducts=[];

     var myProd=products;

     document.getElementById("demo1").innerHTML="Cart has " +countA + "  Products";

     console.log(index);

     for(let i=0;i<products.length;i++){

       var myProd=products[i];

      if(myProd.id === index){

        myProd.quantity+=1;

        document.getElementById("display").innerHTML=myProd.name + "  quantity in Cart  "  + myProd.quantity;

      }

     };

                     

        

    }

           

 function show(){

  var str ="";

   var str = "<div><div class = 'header'>Name</div>";

    str = str + "<div class = 'header1'>Price</div>";

     str = str + "<div class = 'header1'>Buy</div></div>";

      var len = products.length;

      for(var i=0;i<len;i++){

        prod = products[i];

        var name1 = "<div class = 'txt'>"+prod.name+"</div>";

         var price1 = "<div class = 'txt1'>"+prod.price+"</div>";

         var btn1 = "<div class = 'txt1'><button onclick=Buy("+prod.id+")>Buy</button></div>";

          var row = "<div>"+name1+price1+btn1+"</div>";

          str = str + row;

      }

      document.getElementById("demo").innerHTML = str;

 }

 

</script>

</html>
2

I have no idea what you’re asking for here but please don’t include a minimised CSS next time

1 Like
3

Hello and welcome to the freeCodeCamp community~!

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Hello there.

Do you have a question?

The more information you give us, the more likely we are to be able to help.

4

I am getting an error in the last of this code Uncaught Reference type than the id of that product when I press the button to buy that product

5

Problem is this line:

var btn1 = "<div class = 'txt1'><button onclick=Buy("+prod.id+")>Buy</button></div>";

You’re passing the product id as a variable to your Buy function (A441 for the first product, for example), which is of course not defined. What you actually want to pass it is the string ‘A441’, so you’ll have to add an extra pair of quotes to your event handler.

6

can you please solve this issue

7

I just did, I said you’ll need to add a pair of extra quotes to your onclick callback function Buy, so you don’t pass it prod.id as a variable, but as a string. In quotes.

However, if you only want to copy/paste a solution without actually understanding it, I’m not holding you back:

var btn1 = "<div class = 'txt1'><button onclick=Buy('"+prod.id+"')>Buy</button></div>";
8