Question

我有一个用html，css和javascript编写的食物菜单，允许用户单击食物项目，并显示一个表格，以便他们自定义其订单。我将表单div的可见性设置为隐藏，直到用户单击菜单中的特定食品，然后JavaScript函数将使用户能够查看表单并自定义其顺序。该功能还更新了用户的购物车。用户填写完表单后，他们退出表单，这触发了一个JavaScript函数，该函数将div的可见性设置回隐藏。

问题在于它还隐藏和删除了他们购物车中应该包含的信息，我不确定为什么。购物车与隐藏表单不在同一div中，我将购物车的可见性明确设置为可见。因此，我不确定100％关闭表单时为什么数据会消失。它应该保留在购物车中。这是我的html代码的示例：

<div class="hidden-order" id="orderId>"
 <form method="post" id="orderForm">
  <div class="hidden-flex">
    <div class="hidden-text">
      <h2>header</h2>
      <p>food description
      </p>
    </div>
      <input class="img-btn" type="image" src="exit-icon.png" name="img" width="30"
         height="30" onclick="closeWindow('idOfWindowClosed')"/>
  </div>
      <img src="foodImg.png">
      <h4>Shell Choice</h4>
      <input type="radio" name="choice" value="choice1">
      Choice1<br>
      <input type="radio" name="choice" value="choice2">
      Choice2<br>
      <input type="radio" name="choice" value=choice3>Choice3<br>
<h4>Taco Preperation</h4>
<input type="radio" name="fooPrep" value="regular">Regular
  <p> <input class="add-price" type="radio" name="fooPrep" value="supreme">
    Supreme (+$0.70)</p><br>
  <h4>Extra Instructions</h4>
  <textarea class="t-area" rows="5" cols="50" name="extraInstructions">Allergies, Extra, Spicy ect.</textarea>
  <label for="quantity">Quantity</label>
  <input type="number" name="quantity" min="1" max="20"/>
  <input type="hidden" value="$2.10" name="price">
  <input type="hidden" value="Name Of Food Item" name="itemName">
  <input type="button" value="Add" id="submit-btn" onclick="addToCartClicked('doritos-locos-form')"/>

因此，当用户单击与上面的表单关联的按钮时，数据将发送到我html页面底部的购物车。这是基本的购物车：

<div id="shoppingCart"></div>

这是与我的订单类关联的CSS代码。如您所见，我最初将可见性设置为“隐藏”，以便当用户单击与该食品项目关联的div时，表单仅显示为。

.hidden-order {display: block;
       visibility: hidden; /*make the element hidden here */
       position: fixed;
       bottom: 1em;
       border-radius: .2em;
       border-stype: solid;
       border-width: 1em;
       border-color: gray;
       top: 1em;
       z-index-9;
       background-color: #fff;
       margin: auto;
       max-width: 33.33%;
       overflow-y: scroll;
       padding: 1em;
      }

接下来，这是html代码和JavaScript代码，这些代码使在按下div后即可显示表格叠加层：

<div class="food-item this-food-item" id="item-1" onclick="alertUser('item-1')">

JavaScript：

function alertUser(id){
   var foodItem =  document.getElementById(id);
   foodItem.style.visibility = "visible";
   }

然后，用户填写了现在可见的表单后，由于该功能，应将数据呈现到购物车中：

function addToCartClicked(id){
   var cartItem = document.getElementById(id);
   var theCart = document.getElementById('shoppingCart');
   var title = document.getElementById('title');
   var itemName = cartItem.itemName.value;
   htmlString += "<p>Item: " + itemName + "</p>";
   theCart.innerHTML = htmlString;
   }

现在，数据将显示在我的购物车中。回想一下，我的购物车与表单位于不同的div中，并且其可见性已明确设置为visible，因此当用户退出表单时，它不应消失：

#shoppingCart { display: block;
                visibility: visible;
              }

最后，这是当用户按下我的表单上的退出按钮时将叠加层设置回隐藏的功能：

function closeWindow(id){
   document.getElementById(id).style.visibility = "hidden";
   var theCart = document.getElementById('shoppingCart');
   theCart.style.visibility = "visible";
   }

只是为了确保购物车仍然可见，我在上面的函数中将其可见性明确设置为再次可见。以下是我正在尝试做的一些图像：

在第一个图像中，用户进入菜单页面并单击一个项目。购物车是空的。在第二张图片中，他们填写了显示为覆盖图的表单，并将他们的选择添加到购物车中。当他们退出覆盖表单时，购物车信息将完全丢失。我希望这些信息即使在退出叠加层后仍然保留。

Answer 1

这是因为<input type="image" />的行为类似于“提交”按钮。来自docs

该元素是一个替换元素（其内容不是由CSS层生成或直接管理的元素），其行为与常规元素几乎相同，但具有提交按钮的功能。

因此，您必须使用event.preventDefault()来防止默认行为。

我伪造了您的表格来演示解决方案。

function closeWindow(event) {
  event.preventDefault();
}

<form>
<input type="image" src="https://dummyimage.com/50x50/000/fff&text=C" onclick="closeWindow(event)"/>
<input />
</form>

当叠加层设置为隐藏时，JavaScript更新会消失

1 个答案: