为什么这个函数会导致这么多错误？

4 阅读 0 评论 0 点赞

尝试为带有购物车“预览窗口”的电子商务网站构建购物车页面，单击该窗口会打开和关闭该窗口。我注意到此函数中存在一些错误，并且感觉是同一个错误导致了这些问题。事件侦听器位于下面粘贴的另一个文件中

import { viewCartWindow } from "/static/js/supplyshop/pageactions/CatalogAction.min.js"
import {  removeBtn } from "/static/js/supplyshop/pageactions/CatalogAction.min.js"
import { addToCart } from "/static/js/supplyshop/pageactions/CatalogAction.min.js"

window.addEventListener('click', viewCartWindow)

window.addEventListener('click', removeBtn)

window.addEventListener('click', addToCart)

第一次单击查看购物车按钮会从购物车中删除商品并显示一条空购物车消息。此按钮应仅显示/隐藏购物车预览窗口。2.删除一个项目后，查看购物车按钮停止工作，不再隐藏点击窗口

这可能是因为我编写 viewCartWindow 函数的方式导致的吗？if 语句是否遗漏了某些东西，或者是否有更好的方法来编写它以避免这些错误发生？

let cartContainer = document.querySelector('.cart-window')
function viewCartWindow() {
    if (cartContainer.style.display === 'none') {
        cartContainer.style.display = 'block'
    } else {
        cartContainer.style.display = 'none'
    }
}

function replaceContent(el) {
    let msg = 'Your cart is currently empty.'
    let textNode = document.createTextNode(msg)
    el.appendChild(textNode)
    el.classList.add('empty-message')
}

function removeBtn() {
    let cartItem = document.querySelector('.cart-item')
    let div = document.querySelector('.div')    

    if (cartContainer.style.display === 'block') {
        cartItem.remove()
    } else {
        cartContainer.style.display = 'block'
        cartItem.remove()
    }

    replaceContent(div)
}

.empty-cart-msg {
  font-size: 1.3rem;
  color: white;
  text-align: center;
  position: relative;
  background-color: #111;
  border: none;
}

.hidden {
  display: none;
}
.catalog-h1 {
  display: inline;
  color: #111;
  text-align: center;
  font-size: 1.5rem;
  position: relative;
  left: 45.5%;
}
.column {
  float: left;
  width: 15%;
  padding: 10px;
  height: max-content; 
  margin: 5px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
  border-radius: 2%;
  background-color: #aeabab;
}

.row {
  margin: 2% 0% 2% 2%;
  position: relative;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}
.item-name {
  color: black;
  font-weight: 300;
  text-align: center; 
}
.item-img {
  width: 100%;
  height: 100%;
  border-radius: 2%;
}

/* search box */
#search-bar {
  float: right;
  padding: 6px;
  right: 15%;
  position: relative;
  /* margin-right: 16px; */
  border: solid 2px #aeabab;
  font-size: 17px;
}

#ul-results {
  display: flex;
  flex-direction: column;
  padding: 5px;
  /* margin-right: 2%; */
  /* float: right;
  position: relative; */

}

.li-result {
  width: 30%;
  padding: 10px 0;
  text-align: center;
  list-style-type: none;
  color: black;
  background-color: white;
  border: #797575 1px solid;
}

.li-result:hover {
  background-color: #c7c2c2;
  cursor: pointer;
}

.view-cart {
  color: white;
  float: right;
  position: relative;
  left: 12%;
  padding: 5px 5px 5px 5px;
  border: #111 solid 1px;
  text-decoration: none;
  border-radius: 5px 5px 5px 5px;
  background-color: #797575;
  font-size: 1rem;
}

.view-cart:visited {
  text-decoration: none;
}
.view-cart:hover {
  background-color: #333;
  cursor: pointer;
}

.left-arrow {
  width: 10%;
  height: auto;
  text-align: center;
  font-size: 1.3rem
}

.right-arrow {
  width: 10%;
  height: auto;
  text-align: center;
  font-size: 1.3rem
  
}

.page-buttons {
  display: flex;
  flex-wrap: nowrap;
  margin: 0 8%;
  font-size: larger;
}

.btn-container {
  display: flex;
  position: relative;
  margin-left: 36%;
}

.detailsBtn {
  width: fit-content;
  height: fit-content;
}

/* Categories Catalog */

.background {
  background-color: black;
  padding: 2% 0 2% 2%;
}

.main-link {
  color: white;
  float: right;
  padding-right: 2%;
}

.header {
  text-align: center;
  font-weight: 100;
  font-size: 1.8rem;
}

li.category {
  list-style: none;
  color: white;
  margin: 5px 0;
}

.cat-link:link {
 color: white;
}

.cat-link:hover {
  color: yellow;
  font-size: 1.2rem;
}

.cart-window {
  width: 26% !important;
  position: absolute;
  left: 72%;
  top: 15%;
  border: solid 1px black;
  padding: 10px 20px;
}

h2 {
  text-align: center;
}

.cart-wrapper {
  overflow-y: auto;
  max-height: 350px;
}

.total {
  text-align: right;
  padding: 5%;
}

.checkout-btn {
  display: block;
  width: 100%;
  text-align: center;
  cursor: pointer;
  border: solid 3px black;
  font-size: larger;
  padding: 10px;
  color: black;
  text-decoration: none;
  position: relative;
  margin-bottom: 5%;
}

.checkout-btn:hover {
  background-color: black;
  color: white;
}

.view-cart-link {
  /* width: 95%; */
  position: relative;
  cursor: pointer;
  font-size: large;
  margin: 3%;
  padding: 10px;
  color: black;
  left: 32%;

}

.cart-item {
  display: grid;
  grid-template-columns: 3fr 6fr 1fr;
  padding: 5% 2%;
  border-bottom: solid 1px lightgray;
}

.cart-item img {
  width: 100%;
}

.cart-item .details {
  padding-left: 10%;
}

.text-color {
  color: black;
}

.cart-preview {
  text-align: center;
}

.border-bottom:after {
  content: ""; 
  display: block;
  margin: 0 auto; 
  width: 85%; 
  padding-top: 10px; 
  border-bottom: 1px solid black; 
}

.cancel {
  height: fit-content;
  cursor: pointer !important;
  z-index: 1;
  background-color: white;
}

.empty-message {
  background-color: white;
  font-size: 1.3rem;
  color: black;
  text-align: center;
}

<button class='view-cart' type='button'>View Cart </button>
<!-- view cart window-->
<div class='cart-window' style>
  <h2 class='cart-preview text-color border-bottom'>Cart Preview</h2>
  <div class='cart-wrapper div'>

    <div class='cart-item'>
      <img src="https://developers.elementor.com/docs/assets/img/elementor-placeholder-image.png" alt="">
      <div class='details'>
        <h3 class='text-color'>Item Name</h3>
        <p class='text-color'>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
        <p class='text-color quantity'>Qty: 1</p>
      </div>
      <span class='cancel'><i class="fa-solid fa-x"></i></span>
    </div>


  </div>
  <div class='total'>Total Items(s): 1</div>

  <a href=" {% url 'supplyshop:cart-management'  %}" class='checkout-btn'>Checkout</a>
       
</div>

展开片段

You're adding all event listeners to the window object. This will result in that viewCartWindow, removeBtn and addToCart will all be called on every click anywhere on the page. If you want to have your click happen only when a certain button is clicked, then either add the event listener to that button or determine the element that caused the click in the event handler. Be aware that viewCartWindow checks if cartContainer has an inline display: none style, which it hasn't when initializing. Adding / removing classes would be an easier method to evaluate and to change the state.