Редактор не читает данные в разделе "Добавить в корзину" моего проекта
Мой запрос: когда я нажимаю кнопку "Добавить", добавляется новая строка div, но ее данные не добавляются вместо нее, добавляется имя метки. Т.е. Изображение productTitle productPrice Remove. Данные не отображаются, только его имя / метка отображается каждый раз, когда я нажимаю кнопку.
Проблема: я думаю, что проблема в функции -addtocart (productTitle, productImage, productPrice), поскольку она не считывает данные и когда я нахожу курсор на аргументы в редакторе, он говорит, что "productImage" объявлен, но его значение никогда не читается.(6133), аналогично для названия и цены.
//Java Script code
var addbtn =document.getElementsByClassName('addbtn');
for(var i=0 ;i<addbtn.length;i++)
{
addbtn[i].addEventListener('click',function(e)
{
currentbtn = e.target;
productcontainer = currentbtn.parentElement;
productTitle = productcontainer.getElementsByClassName('product-title')[0].innerText;
productImage= productcontainer.getElementsByClassName('product-img')[0].src;
productPrice= productcontainer.getElementsByClassName('product-price')[0].innerText;
// addnew( productTitle, productPrice,productImage);
addtocart(productTitle,productImage,productPrice);
});
}
cartContainer = document.getElementsByClassName('cartContainer')[0];
function addtocart(productTitle,productImage,productPrice)
{
newdiv = document.createElement('div');
newdiv.classList.add('row');
insideContent ='<div class="col-sm cartImage"><img src="productImage"></div><div class ="col-sm card cartTitle">productTitle</div><div class="col-sm cartPrice">productPrice</div><div class="col-sm removeBotton" >Remove </div>';
newdiv.innerHTML = insideContent;
cartContainer.appendChild(newdiv);
}
//HTML code
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="cart.css">
<title>Hello, world!</title>
</head>
<body>
<section>
<div class="row row-cols-2 row-cols-md-3 row-cols-sm-2">
<div class="col mb-4">
<div class="card h-80">
<div class="card-body d-flex flex-column align-items-center img-fluid">
<img src="https://m.media-amazon.com/images/I/81bDJ8AC5HL._AC_SX180_SY120_QL70_.jpg" class="card-img-top img-fluid product-img" alt="..."id="cardimg">
<h5 class="card-title product-title">Product1</h5>
<p class="card-text product-price">100</p>
<button type="button" class="btn btn-warning addbtn">Add</button>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-80">
<div class="card-body d-flex flex-column align-items-center ">
<img src="https://m.media-amazon.com/images/I/61utX8kBDlL._AC_UL320_.jpg" class="card-img-top img-fluid product-img" alt="..."id="cardimg">
<h5 class="card-title product-title">Product2</h5>
<p class="card-text product-price">200</p>
<button type="button" class="btn btn-warning addbtn">Add</button>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card h-80">
<div class="card-body d-flex flex-column align-items-center">
<img src="https://m.media-amazon.com/images/I/71JhEnGtlfL._AC_UL320_.jpg"class="card-img-top img-fluid product-img" alt="..."id="cardimg">
<h5 class="card-title product-title">Product3</h5>
<p class="card-text product-price">300</p>
<button type="button" class="btn btn-warning addbtn">Add</button>
</div>
</div>
</div>
</div>
</section>
<div class="cartContainer">
<div class="row">
<div class="col-sm ">
Product
</div>
<div class="col-sm">
Title
</div>
<div class="col-sm">
Price
</div>
<div class="col-sm">
Action
</div>
</div>
<!--This new div row content will be added in new div-->
<!--<div class="row">
<div class="col-sm cartImage">
<img src=" https://m.media-amazon.com/images/I/81bDJ8AC5HL._AC_SX180_SY120_QL70_.jpg">
</div>
<div class="col-sm card cartTitle">
Product1
</div>
<div class="col-sm cartPrice">
100
</div>
<div class="col-sm removeBotton" >
Remove
</div>
</div>-->
</div>
<script src="cart.js"></script>
</body>
</html>
```
<!-- begin snippet: js hide: false console: true babel: false -->