如何解决编辑器未在我的项目的“添加到购物车”部分中读取数据
我的查询:当我单击“添加”按钮时,会添加新的div行,但不会在其位置上添加其数据,而是会添加其标签名称。ie-Image productTitle productPrice Remove。不会仅显示其名称的数据每次单击按钮都会显示/ label。
问题:我认为问题出在-addtocart(productTitle,productImage,productPrice)函数中 因为它不读取数据,而且当我将鼠标悬停在编辑器中的参数上时,它说已声明'productImage',但其值从未读取。ts(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,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 -->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。