当覆盖设置为隐藏时，JavaScript更新将不显示

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>

下面是与我的hodden-order类关联的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中，而不是表单，并且它的可见性被显式地设置为可见，所以当用户退出表单时，它不应该消失：

#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" />的行为类似于提交按钮。来自文档

该元素是一个被替换的元素(它的内容不是由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>

​