當我點擊添加到購物車時，該專案是文本印刷。當點擊其他添加到購物車按鈕時，文本被覆寫-有解無憂

function myFunc() {
  var cart = document.createElement('div');
  document.body.appendChild(cart);
  cart.id = "cart";
  var btn1 = document.getElementById('btn1');
  var btn2 = document.getElementById('btn2');
  var btn3 = document.getElementById('btn3');
  var btn4 = document.getElementById('btn4');
btn1.onclick = function() {item_1_cart()};
btn2.onclick = function() {item_2_cart()};
  function item_1_cart() {
    btn1.addEventListener("click", add_cart)
    function add_cart() {
      btn1.onclick = cart.innerHTML;
      cart.innerHTML = "hi";
    }
  }
    function item_2_cart() {
    btn2.addEventListener("click", add_cart)
    function add_cart() {
      btn2.onclick = cart.innerHTML;
      cart.innerHTML = "lalith";
    }
  }
}

.all {
  display: flex;
}
.item_container {
  display: flex;
  flex-direction: column;
  background-color: #ffcccc;
  width: 250px;
  border-radius: 6px;
  box-shadow: 10px 10px 30px;
  align-items: center;
  margin: 5%;
}
.itm_img  {
  padding: 2%;
}
.img {
  width: 200px;
  border-radius: 5px;
}
.itm_title {
  text-align: center;
}
h3 {
  font-family: 'Roboto', sans-serif;
  margin-bottom: 0%;
}
a:link {
  color: #99ddff;
  text-decoration: none;
}
a:visited {
  color: green;
}
a:hover {
  text-decoration: underline;
}
a:active {
  color: #99ddff;
}
.price {
  font-weight: bold;
  font-size: 25px;
  font-family: 'Roboto', sans-serif;
  text-align: center;
}
.link {
  text-align: center;
}
hr {
  margin: 4%;
}
.btn {
  margin-left: 32%;
  margin-top: 5%;
  margin-bottom: 6%;
}
.btn1, .btn2 {
  background-color: #80ffcc;
  border: none;
  padding: 5%;
  border-radius: 6px;
}
.btn1:hover, .btn2:hover {
  background-color: #80e5ff;
  transition: 0.5s;
  box-shadow: 5px 5px 10px;
}
#itemshow {
  display: none;
}

/*#cart {
  display: none;
  color: white;
  background-color: black;
  padding: 2%;
}
*/
#total_itm_value {
  font-size: 25px;
}
#iqp, #tp {
  display: flex;
}
.itm_title_1 {
  display: block;
}

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">
</head>

<body>
  <div class="all">
    <div class="item_container">
      <div class="itm_img" id="itm_img_1">
        <img src="https://m.media-amazon.com/images/I/61X1b09mK0L._SL1500_.jpg" alt="img" class="img" id="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title" id="itm_title">
          <h3> Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id="btn1" onclick = "myFunc()">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img" id="itm_img_2">
        <img src="https://m.media-amazon.com/images/I/616G5-FDTvL._SX425_.jpg" alt="img" class="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title">
          <h3> Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn2" id = "btn2" onclick = "myFunc()">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img" id="itm_img_3">
        <img src="https://m.media-amazon.com/images/I/61nb1cWMOiL._SX679_.jpg" alt="img" class="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title">
          <h3> Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id = "btn3" onclick = "myFunc()">Add to Cart</button>
        </div>
      </div>
    </div>
    <div class="item_container">
      <div class="itm_img" id=".itm_img_4">
        <img src="https://m.media-amazon.com/images/I/61TYUKCL2IL._SX679_.jpg" alt="img" class="img">
      </div>
      <div clas="itm_dtl">
        <div class="itm_title">
          <h3> Milton stainless steel Water Bottle, 1 pc, 950 ml, Silver</h3>
        </div>
        <div class="link">
          <a href="https://www.milton.in/">Visit Milton Store</a>
        </div>
        <hr>
        <div class="price">$19</div>
        <div class="btn">
          <button class="btn1" id = "btn3" onclick = "myFunc()">Add to Cart</button>
        </div>
      </div>
    </div>
  </div>
</body>

當我點擊添加到購物車時，該專案是文本印刷。當點擊其他添加到購物車按鈕時，文本被覆寫。有沒有其他使用 javascript 的解決方案。我是 javascript 的初學者 預先感謝您在 我單擊“添加到購物車”時回答我的問題，該專案是文本正在列印。當點擊其他添加到購物車按鈕時，文本被覆寫。有沒有其他使用 javascript 的解決方案。我是 javascript 的初學者， 在此先感謝您回答我的問題

uj5u.com熱心網友回復：

元素的內容cart正在更新，因為這正是這些代碼行所做的：

cart.innerHTML = "hi";
//...
cart.innerHTML = "lalith";

他們innerHTML將該元素的值設定為該字串。就這樣。

如果你想追加而不是覆寫，你可以追加而不是覆寫：

cart.innerHTML  = "hi";
//...
cart.innerHTML  = "lalith";

注意 =操作員。此操作本質上是此操作的較短版本：

cart.innerHTML = cart.innerHTML   "hi";
//...
cart.innerHTML = cart.innerHTML   "lalith";

請注意它在構造新值時如何使用現有值。這當然都在同一行上，因此您也可以包括換行符或其他一些標記：

cart.innerHTML  = "<br/>hi";
//...
cart.innerHTML  = "<br/>lalith";

如何定義和管理標記由您決定。重點是如果你想保留之前的內容那么你需要在設定值的時候包含之前的內容。

順便說一句，你在這里也有幾個邏輯問題：

btn1.onclick = function() {item_1_cart()};
function item_1_cart() {
  btn1.addEventListener("click", add_cart)
  function add_cart() {
    btn1.onclick = cart.innerHTML;
    cart.innerHTML = "hi";
  }
}

您正在分配一個點擊處理程式，然后在該點擊處理程式中分配另一個點擊處理程式。此外，在第二個點擊處理程式中，您將文本指定為新的點擊處理程式，這根本沒有意義。

這就是為什么：

您需要多次單擊才能看到初始輸出。
隨后的輸出加倍。

不要重新分配一個全新的點擊處理程式，也不要做一些令人困惑和荒謬的事情，比如將文本分配為點擊處理程式。只需分配執行所需邏輯的處理程式：

btn1.addEventListener("click", item_1_cart)
function item_1_cart() {
  cart.innerHTML  = "<br/>hi";
}

您的其他點擊處理程式當然也是如此。

轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/533737.html

標籤：javascript元素购物车覆盖

上一篇：如何使用柏樹查找具有某個名稱的標簽？

下一篇：反應側面板轉換沒有發生