javascript - 当我有时点击购物按钮时，它不起作用 javascript
问题描述
我编写了一个将商品添加到购物车的代码（.products-container 类）。代码效果很好，但是有时当我单击按钮时，它不起作用！. 这非常随机发生，我查看了浏览器控制台是否有错误，但没有给出！（我认为这与脚本加载有关）
let cartNumStr = document.querySelector('.counter-eclipse-num').innerText;
let cartNum = Number(cartNumStr);
let sumPrice = document.querySelector('.sum-price').innerText;
sumPrice = Number(sumPrice);
document.querySelector(".polygon-cart").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("fa-trash")) {
const container = tgt.closest(".cart-content-container");
let qty = container.querySelector(".cart-qty").value;
if (qty < 2){
container.remove();
cartNum = cartNum - 1;
document.querySelector('.counter-eclipse-num').innerText = cartNum;
}
else {
qty = qty -1;
container.querySelector(".cart-qty").value = qty;
cartNum = cartNum - 1;
document.querySelector('.counter-eclipse-num').innerText = cartNum;
if (cartNum <10) {
document.querySelector('.counter-eclipse-num').style.right = "5.2px";
}
}
}
});
function addCartNum() {
cartNum = cartNum + 1;
document.querySelector('.counter-eclipse-num').innerText = cartNum;
if (cartNum > 9){
document.querySelector('.counter-eclipse-num').style.right = "2.2px";
}
}
document.querySelector(".products-container").addEventListener("click", function(f){
fgt = f.target;
if (fgt.classList.contains("fa-shopping-cart")){
const container = fgt.closest(".product-1")
let title = container.querySelector(".product-title").innerText;
let price = container.querySelector(".product-price").innerText;
let img = container.querySelector(".product-img").src;
let cartContentContainer = document.createElement("div")
cartContentContainer.classList.add('cart-content-container');
let motherElement = document.querySelector(".main-cart-content-container");
let cartItemContent =
` <p class="cart-price" dir="rtl">${price}</p>
<div class="cart-qty-container">
<input dir="rtl" type="number" min="1" value="1" class='cart-qty' id="cart-qty"oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
<label class="cart-qty-label" dir="rtl">تعداد   :  </label>
</div>
<a href="#" dir="rtl" class="cart-title">${title}</a>
<i class="fas fa-trash" id = "trash-icon"></i>
<div class="cart-product-img-container">
<img src="${img}" class="cart-product-img">
</div>
`
cartContentContainer.innerHTML = cartItemContent;
motherElement.append(cartContentContainer);
let realPrice = container.querySelector('.real-price').innerText;
realPrice = Number(realPrice);
sumPrice = sumPrice + realPrice;
document.querySelector('.sum-price').innerText = sumPrice;
addCartNum();
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Header.CSS">
<link rel="stylesheet" href="Style.CSS">
<link rel="stylesheet" href="Footer.CSS">
<script src="https://kit.fontawesome.com/38b3678073.js" crossorigin="anonymous"></script>
<script src="/JS/main.js" async></script>
<title>خانه | PCGA</title>
</head>
<body>
<header>
<div class="polygon-cart" id = "cart">
<i class="fas fa-shopping-cart" id="cart-icon"></i>
<div class="counter-eclipse">
<p class="counter-eclipse-num">0</p>
</div>
<div class="main-cart-content-container" id = "main-cart-content-container">
</div>
<div class="cart-info-top">
<button class="cart-checkout-btn">تسویه نهایی</button>
<span class="cart-whole-price">جمع مبلغ سبد خرید شما : <span class = "sum-price">0</span> هزارتومان</span>
</div>
</div>
<img src="img/Final-Logo.png" alt="Final-Logo" class="Final-Logo" height="171px" width="500px">
<div class="SearchContainer">
<table class="SearchTable">
<tr>
<td>
<input type="text" placeholder="Search" class="SearchBar">
</td>
<td>
<a href="#"><i class="SearchIcon"></i></a>
</td>
</tr>
</table>
</div>
<nav class="nav-top">
<ul>
<a href="/index.html"><li>خانه</li></a>
<div class="nav-products">
<a href="#"><li>محصولات</li></a>
<ul class = products-dropdown-content>
<a href="/Products-Origin.html"><li>(Origin) اوریجین</li></a>
<a href="/Products-Steam.html"><li>(Steam) استیم</li></a>
<a href="/Products-Uplay.html"><li>(Uplay) یوپلی</li></a>
</ul>
</div>
<a href="#"><li>تماس با ما</li></a>
<a href="#"><li>درباره ما</li></a>
</ul>
</nav>
</header>
<div class = 'products-container'>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">150000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">520000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">750000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">50000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">24000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">36000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
<footer class = 'footer-main'>
<div class='footer-content'>
<div class='col-1'>
<h3>محصولات</h3>
<ul>
<li><a href="/Products-Origin.html">(Origin) اوریجین</a></li>
<li><a href="/Products-Steam.html">(Steam) استیم</a></li>
<li><a href="/Products-Uplay.html">(Uplay) یوپلی</a></li>
</ul>
</div>
<div class='col-2'>
<h3>حساب  کاربری</h3>
<ul>
<li><a href="/page/login.html">ورود</a></li>
<li><a href="/page/register.html">ثبت نام</a></li>
<li><a href="/page/orders.html">سفارشات من</a></li>
</ul>
</div>
<div class='col-3'>
<h3>پشتیبانی</h3>
<ul>
<li><a href="#">سوالات متداول</a></li>
<li><a href="#">قوانین</a></li>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">درباره ما</a></li>
</ul>
</div>
<div class='col-4'>
<img src="/img/bonyad-mojavez.png" class="mojavez-pic">
</div>
</div>
<div class='footer-copyright' dir="rtl">Copyright PCGA.info 2021, all rights reserved | تمامی حقوق برای فروشگاه پی سی جی ای محفوظ است <br> طراحی و توسعه توسط نیما صیادی</div>
</footer>
</body>
</html>解决方案
因为事件只包含在类中，所以当你点击标签fa-shopping-cart的外线标签时，事件不会被执行。iconbutton
所以我从下面添加了事件，
if (fgt.classList.contains("fa-shopping-cart")){
...
}
到下面这个，
if (fgt.classList.contains("buy-btn")||fgt.classList.contains("fa-shopping-cart")){
...
}
因此，每当您单击按钮时都会执行按钮事件。
let cartNumStr = document.querySelector('.counter-eclipse-num').innerText;
let cartNum = Number(cartNumStr);
let sumPrice = document.querySelector('.sum-price').innerText;
sumPrice = Number(sumPrice);
document.querySelector(".polygon-cart").addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("fa-trash")) {
const container = tgt.closest(".cart-content-container");
let qty = container.querySelector(".cart-qty").value;
if (qty < 2){
container.remove();
cartNum = cartNum - 1;
document.querySelector('.counter-eclipse-num').innerText = cartNum;
}
else {
qty = qty -1;
container.querySelector(".cart-qty").value = qty;
cartNum = cartNum - 1;
document.querySelector('.counter-eclipse-num').innerText = cartNum;
if (cartNum <10) {
document.querySelector('.counter-eclipse-num').style.right = "5.2px";
}
}
}
});
function addCartNum() {
cartNum = cartNum + 1;
document.querySelector('.counter-eclipse-num').innerText = cartNum;
if (cartNum > 9){
document.querySelector('.counter-eclipse-num').style.right = "2.2px";
}
}
document.querySelector(".products-container").addEventListener("click", function(f){
fgt = f.target;
///// I edited this condition
//// from if (fgt.classList.contains("fa-shopping-cart")){
//// to this below
if (fgt.classList.contains("buy-btn")||fgt.classList.contains("fa-shopping-cart")){
///// I edited this condition
const container = fgt.closest(".product-1")
let title = container.querySelector(".product-title").innerText;
let price = container.querySelector(".product-price").innerText;
let img = container.querySelector(".product-img").src;
let cartContentContainer = document.createElement("div")
cartContentContainer.classList.add('cart-content-container');
let motherElement = document.querySelector(".main-cart-content-container");
let cartItemContent =
` <p class="cart-price" dir="rtl">${price}</p>
<div class="cart-qty-container">
<input dir="rtl" type="number" min="1" value="1" class='cart-qty' id="cart-qty"oninput="this.value =
!!this.value && Math.abs(this.value) >= 0 ? Math.abs(this.value) : null">
<label class="cart-qty-label" dir="rtl">تعداد   :  </label>
</div>
<a href="#" dir="rtl" class="cart-title">${title}</a>
<i class="fas fa-trash" id = "trash-icon"></i>
<div class="cart-product-img-container">
<img src="${img}" class="cart-product-img">
</div>
`
cartContentContainer.innerHTML = cartItemContent;
motherElement.append(cartContentContainer);
let realPrice = container.querySelector('.real-price').innerText;
realPrice = Number(realPrice);
sumPrice = sumPrice + realPrice;
document.querySelector('.sum-price').innerText = sumPrice;
addCartNum();
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Header.CSS">
<link rel="stylesheet" href="Style.CSS">
<link rel="stylesheet" href="Footer.CSS">
<script src="https://kit.fontawesome.com/38b3678073.js" crossorigin="anonymous"></script>
<script src="/JS/main.js" async></script>
<title>خانه | PCGA</title>
</head>
<body>
<header>
<div class="polygon-cart" id = "cart">
<i class="fas fa-shopping-cart" id="cart-icon"></i>
<div class="counter-eclipse">
<p class="counter-eclipse-num">0</p>
</div>
<div class="main-cart-content-container" id = "main-cart-content-container">
</div>
<div class="cart-info-top">
<button class="cart-checkout-btn">تسویه نهایی</button>
<span class="cart-whole-price">جمع مبلغ سبد خرید شما : <span class = "sum-price">0</span> هزارتومان</span>
</div>
</div>
<img src="img/Final-Logo.png" alt="Final-Logo" class="Final-Logo" height="171px" width="500px">
<div class="SearchContainer">
<table class="SearchTable">
<tr>
<td>
<input type="text" placeholder="Search" class="SearchBar">
</td>
<td>
<a href="#"><i class="SearchIcon"></i></a>
</td>
</tr>
</table>
</div>
<nav class="nav-top">
<ul>
<a href="/index.html"><li>خانه</li></a>
<div class="nav-products">
<a href="#"><li>محصولات</li></a>
<ul class = products-dropdown-content>
<a href="/Products-Origin.html"><li>(Origin) اوریجین</li></a>
<a href="/Products-Steam.html"><li>(Steam) استیم</li></a>
<a href="/Products-Uplay.html"><li>(Uplay) یوپلی</li></a>
</ul>
</div>
<a href="#"><li>تماس با ما</li></a>
<a href="#"><li>درباره ما</li></a>
</ul>
</nav>
</header>
<div class = 'products-container'>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">150000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">520000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">750000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">50000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">24000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
<div class='product-1'>
<div class="product-img-container">
<img src="/img/BFV.jpg" class='product-img'>
<div class = 'product-price'>قیمت : <span class="real-price">36000</span> تومان</div>
</div>
<section class='product-title'>
<h1 dir="rtl"><a href="#">اکانت بازی Battlefield V Deluxe Edition</a></h1>
</section>
<div class="product-des">
<table class="info-table">
<tr>
<th>ضمانت</th>
<th>قابلیت تغییر اطلاعات</th>
<th>پلتفرم</th>
</tr>
<tr>
<td>5 ساله سبز</td>
<td>دارد</td>
<td>یوپلی</td>
</tr>
</table>
<button class="buy-btn" ><i class="fas fa-shopping-cart" id= "addcartbtn"></i></button>
</div>
</div>
</div>
<div class="pagination">
<a href="#">«</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">»</a>
</div>
<footer class = 'footer-main'>
<div class='footer-content'>
<div class='col-1'>
<h3>محصولات</h3>
<ul>
<li><a href="/Products-Origin.html">(Origin) اوریجین</a></li>
<li><a href="/Products-Steam.html">(Steam) استیم</a></li>
<li><a href="/Products-Uplay.html">(Uplay) یوپلی</a></li>
</ul>
</div>
<div class='col-2'>
<h3>حساب  کاربری</h3>
<ul>
<li><a href="/page/login.html">ورود</a></li>
<li><a href="/page/register.html">ثبت نام</a></li>
<li><a href="/page/orders.html">سفارشات من</a></li>
</ul>
</div>
<div class='col-3'>
<h3>پشتیبانی</h3>
<ul>
<li><a href="#">سوالات متداول</a></li>
<li><a href="#">قوانین</a></li>
<li><a href="#">تماس با ما</a></li>
<li><a href="#">درباره ما</a></li>
</ul>
</div>
<div class='col-4'>
<img src="/img/bonyad-mojavez.png" class="mojavez-pic">
</div>
</div>
<div class='footer-copyright' dir="rtl">Copyright PCGA.info 2021, all rights reserved | تمامی حقوق برای فروشگاه پی سی جی ای محفوظ است <br> طراحی و توسعه توسط نیما صیادی</div>
</footer>
</body>
</html>推荐阅读
- flutter - 如何使用颤振制作实时条形码阅读器？
- html - Vue.js 中的内部链接：使用 vue-router 跳转到具有 id 的视图中的特定部分
- java - Android onMenuItemClick 接收错误的项目
- php - 使用 PHP 对 Active Directory 用户字段进行检查
- bash - 解析 git 命令的更有效方法？
- c# - 如何获取子类属性并设置值？
- android - 当我尝试将文件写入特定文件夹时，Flutter 访问被拒绝
- java - 如何增加kafka消费者的请求时间
- java - Android 更新 SQLite 表项
- time-series - 如何用 R 中的自相关参数的预定值拟合 ar(1) 模型？