当我点击添加到购物车时，该项目是文本印刷。当点击其他添加到购物车按钮时，文本被覆盖

Question

 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 的初学者，在此先感谢您回答我的问题

Answer 1

cart元素的内容正在更新，因为这正是这些代码行所做的：

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

他们将该元素的innerHTML值设置为该字符串。 就这样。

如果你想append而不是覆盖，你可以 append 而不是覆盖：

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";
  }
}

您正在分配一个点击处理程序，然后在该点击处理程序中分配另一个点击处理程序。 此外，在第二个点击处理程序中，您将文本指定为新的点击处理程序，这根本没有意义。

这就是为什么：

您需要多次点击才能看到初始的 output。
随后的输出加倍。

不要重新分配一个全新的点击处理程序，也不要做一些令人困惑和荒谬的事情，比如将文本分配为点击处理程序。 只需分配执行所需逻辑的处理程序：

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

您的其他点击处理程序当然也是如此。

当我点击添加到购物车时，该项目是文本印刷。当点击其他添加到购物车按钮时，文本被覆盖

问题描述

1 个解决方案

解决方案1
1 已采纳 2022-11-15 13:46:03

当我点击添加到购物车时，该项目是文本印刷。 当点击其他添加到购物车按钮时，文本被覆盖

问题描述

1 个解决方案

解决方案1 1 已采纳 2022-11-15 13:46:03

当我点击添加到购物车时，该项目是文本印刷。当点击其他添加到购物车按钮时，文本被覆盖

解决方案1
1 已采纳 2022-11-15 13:46:03