表单仅在刷新页面时显示

问题描述 投票：0回答：1

我正在尝试创建一个模拟冰淇淋店网站以改进我的 JavaScript。该页面的问题在于，每个单选按钮在被选中时都会显示两种表单之一。不幸的是，它不起作用 - 我必须在选中要显示的表单的复选框后刷新页面。为什么是这样？我该如何解决它？

第 21-26 行最初位于 init.h 中。我移动了它们，以防它们在自己的功能中会有所帮助，但正如预期的那样，它没有任何作用。我真的不知道为什么这不起作用。

function hideDeliveryAndPickup() {
  // var pickupDiv = document.getElementById("pickupDiv");
  // var deliveryDiv = document.getElementById("deliveryDiv");
  // pickupDiv.style.display = "none";
  // deliveryDiv.style.display = "none";
  document.getElementById("pickupDiv").style.display = "none";
  document.getElementById("deliveryDiv").style.display = "none";
}

function showPickup() {
  document.getElementById("pickupDiv").style.display = "inline";
  document.getElementById("deliveryDiv").style.display = "none";
}

function showDelivery() {
  document.getElementById("deliveryDiv").style.display = "inline";
  document.getElementById("pickupDiv").style.display = "none";
}

function showDeliveryOrPickup() {
  if (document.getElementById("pickup").checked == true) {;
    showPickup();
  }
  if (document.getElementById("delivery").checked == true) {
    showDelivery();
  }
}

function validate() {

}

function init() {
  hideDeliveryAndPickup();
  showDeliveryOrPickup();
}

window.onload = init;
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Order Page</title>
  <meta charset="utf-8" />
  <meta name="description" content="Order page for Sweet Life.">
  <meta name="keywords" content="study">
  <meta name="author" content="Anon">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/script3.js"></script>
</head>

<body>
  <div id="orderhtml">
    <!--Header-->
    <header>
      <h1 class="header" id="headerTop">Sweet Life</h1>
      <h2 class="header" id="headerBottom">Discover a world of ice cream...</h2>
    </header>
    <!--Navigation bar-->
    <div id="topnav">
      <nav class="nav">
        <a href="order.html">Order online</a>
        <a href="register.html">Register</a>
        <a href="index.html">Home</a>
        </ul>
    </div>
    <div class="tagline">
      <h2>Order</h2>
    </div>
    <!--Form-->
    <form>
      <p>First, select either delivery or pickup:</p>
      <label for="delivery">Delivery</label>
      <input type="radio" id="delivery" name="chooseDiv" value="Delivery"><br>
      <label for="pickup">Pickup</label>
      <input type="radio" id="pickup" name="chooseDiv" value="Pickup"><br>
    </form>
    <div id="pickupDiv">
      <br/>
      <p>A's text</p>
      <form id="orderPickupForm">
        <label for="fName">First name:</label><br>
        <input type="text" id="fName" name="fName" value=""><br>
        <label for="lName">Last name:</label><br>
        <input type="text" id="lName" name="lName" value="">
        <p>Select your desired flavour:</p>
        <label for="emailAddress">Email address:</label>
        <input type="text" id="emailAddress" name="emailAddress" value=""><br>
        <select name="selectIceCream" id="selectIceCream">
          <option value="chocolate">Chocolate</option>
          <option value="vanilla">Vanilla</option>
          <option value="strawberry">Strawberry</option>
        </select><br>
        <p>How much ice cream would you like?</p>
        <select name="selectSize" id="selectSize">
          <option value="250ml">250ml</option>
          <option value="600ml">600ml</option>
          <option value="1L">1L</option>
          <option value="2L">2L</option>
        </select><br>
      </form>
    </div>
    <div id="deliveryDiv">
      <br/>
      <p>B's text</p>
      <form id="orderDeliveryForm">
        <label for="firstN">First name:</label><br>
        <input type="text" id="firstN" name="firstN" value=""><br>
        <label for="lastN">Last name:</label><br>
        <input type="text" id="lastN" name="lastN" value="">
        <label for="emailA">Email address:</label>
        <input type="text" id="emailA" name="emailA" value=""><br>
        <p>Select your desired flavour:</p>
        <select name="selectIceCream">
          <option value="chocolate">Chocolate</option>
          <option value="vanilla">Vanilla</option>
          <option value="strawberry">Strawberry</option>
        </select><br>
        <p>How much ice cream would you like?</p>
        <select name="selectSize">
          <option value="250ml">250ml</option>
          <option value="600ml">600ml</option>
          <option value="1L">1L</option>
          <option value="2L">2L</option>
        </select><br>
      </form>
    </div>
  </div>
  </div>
</body>

javascript html forms radio-button
1个回答
0
投票

您缺少事件处理程序。您需要检测点击并运行脚本。

这是一个改进版本，使用委托来检测无线电容器中的任何点击。它完全替代了您在此处发布的所有代码。

注意我将 

hidden
添加到了两个 div 

window.addEventListener("DOMContentLoaded", () => { // when the page has loaded
  container = document.getElementById("orderhtml");
  const pickupDiv = document.getElementById("pickupDiv");
  const deliveryDiv = document.getElementById("deliveryDiv");
  container.addEventListener("click", (event) => {
    const tgt = event.target;
    if (!tgt.matches("[name=chooseDiv]")) return; // not a radio
    const delivery = tgt.id === "delivery";
    deliveryDiv.hidden = !delivery;
    pickupDiv.hidden = delivery
  })
})
<div id="orderhtml">
  <!--Header-->
  <header>
    <h1 class="header" id="headerTop">Sweet Life</h1>
    <h2 class="header" id="headerBottom">Discover a world of ice cream...</h2>
  </header>
  <!--Navigation bar-->
  <div id="topnav">
    <nav class="nav">
      <a href="order.html">Order online</a>
      <a href="register.html">Register</a>
      <a href="index.html">Home</a>
    </nav>
  </div>
  <div class="tagline">
    <h2>Order</h2>
  </div>
  <!--Form-->
  <form>
    <p>First, select either delivery or pickup:</p>
    <label for="delivery">Delivery</label>
    <input type="radio" id="delivery" name="chooseDiv" value="Delivery"><br>
    <label for="pickup">Pickup</label>
    <input type="radio" id="pickup" name="chooseDiv" value="Pickup"><br>
  </form>

  <div id="pickupDiv" hidden>
    <br/>
    <p>A's text</p>
    <form id="orderPickupForm">
      <label for="fName">First name:</label><br>
      <input type="text" id="fName" name="fName" value=""><br>
      <label for="lName">Last name:</label><br>
      <input type="text" id="lName" name="lName" value="">
      <p>Select your desired flavour:</p>
      <label for="emailAddress">Email address:</label>
      <input type="text" id="emailAddress" name="emailAddress" value=""><br>
      <select name="selectIceCream" id="selectIceCream">
        <option value="chocolate">Chocolate</option>
        <option value="vanilla">Vanilla</option>
        <option value="strawberry">Strawberry</option>
      </select><br>
      <p>How much ice cream would you like?</p>
      <select name="selectSize" id="selectSize">
        <option value="250ml">250ml</option>
        <option value="600ml">600ml</option>
        <option value="1L">1L</option>
        <option value="2L">2L</option>
      </select><br>
    </form>
  </div>
  <div id="deliveryDiv" hidden>
    <br/>
    <p>B's text</p>
    <form id="orderDeliveryForm">
      <label for="firstN">First name:</label><br>
      <input type="text" id="firstN" name="firstN" value=""><br>
      <label for="lastN">Last name:</label><br>
      <input type="text" id="lastN" name="lastN" value="">
      <label for="emailA">Email address:</label>
      <input type="text" id="emailA" name="emailA" value=""><br>
      <p>Select your desired flavour:</p>
      <select name="selectIceCream">
        <option value="chocolate">Chocolate</option>
        <option value="vanilla">Vanilla</option>
        <option value="strawberry">Strawberry</option>
      </select><br>
      <p>How much ice cream would you like?</p>
      <select name="selectSize">
        <option value="250ml">250ml</option>
        <option value="600ml">600ml</option>
        <option value="1L">1L</option>
        <option value="2L">2L</option>
      </select><br>
    </form>
  </div>
</div>

您可以通过使用无线电上的数据属性来改进脚本

window.addEventListener("DOMContentLoaded", () => { // when the page has loaded
  const container = document.getElementById("orderhtml");
  const divs = container.querySelectorAll("div[hidden]");
  container.addEventListener("click", (event) => {
    const tgt = event.target;
    if (!tgt.matches("[name=chooseDiv]")) return; // not a radio
    divs.forEach(div => div.hidden = div.id !== tgt.dataset.div)
  })
})
<div id="orderhtml">
  <!--Header-->
  <header>
    <h1 class="header" id="headerTop">Sweet Life</h1>
    <h2 class="header" id="headerBottom">Discover a world of ice cream...</h2>
  </header>
  <!--Navigation bar-->
  <div id="topnav">
    <nav class="nav">
      <a href="order.html">Order online</a>
      <a href="register.html">Register</a>
      <a href="index.html">Home</a>
    </nav>
  </div>
  <div class="tagline">
    <h2>Order</h2>
  </div>
  <!--Form-->
  <form>
    <p>First, select either delivery or pickup:</p>
    <label for="delivery">Delivery</label>
    <input type="radio" id="delivery" name="chooseDiv" value="Delivery" data-div="deliveryDiv"><br>
    <label for="pickup">Pickup</label>
    <input type="radio" id="pickup" name="chooseDiv" value="Pickup" data-div="pickupDiv"><br>
  </form>

  <div id="pickupDiv" hidden>
    <br/>
    <p>A's text</p>
    <form id="orderPickupForm">
      <label for="fName">First name:</label><br>
      <input type="text" id="fName" name="fName" value=""><br>
      <label for="lName">Last name:</label><br>
      <input type="text" id="lName" name="lName" value="">
      <p>Select your desired flavour:</p>
      <label for="emailAddress">Email address:</label>
      <input type="text" id="emailAddress" name="emailAddress" value=""><br>
      <select name="selectIceCream" id="selectIceCream">
        <option value="chocolate">Chocolate</option>
        <option value="vanilla">Vanilla</option>
        <option value="strawberry">Strawberry</option>
      </select><br>
      <p>How much ice cream would you like?</p>
      <select name="selectSize" id="selectSize">
        <option value="250ml">250ml</option>
        <option value="600ml">600ml</option>
        <option value="1L">1L</option>
        <option value="2L">2L</option>
      </select><br>
    </form>
  </div>
  <div id="deliveryDiv" hidden>
    <br/>
    <p>B's text</p>
    <form id="orderDeliveryForm">
      <label for="firstN">First name:</label><br>
      <input type="text" id="firstN" name="firstN" value=""><br>
      <label for="lastN">Last name:</label><br>
      <input type="text" id="lastN" name="lastN" value="">
      <label for="emailA">Email address:</label>
      <input type="text" id="emailA" name="emailA" value=""><br>
      <p>Select your desired flavour:</p>
      <select name="selectIceCream">
        <option value="chocolate">Chocolate</option>
        <option value="vanilla">Vanilla</option>
        <option value="strawberry">Strawberry</option>
      </select><br>
      <p>How much ice cream would you like?</p>
      <select name="selectSize">
        <option value="250ml">250ml</option>
        <option value="600ml">600ml</option>
        <option value="1L">1L</option>
        <option value="2L">2L</option>
      </select><br>
    </form>
  </div>
</div>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.