表单仅在刷新页面时显示-解网

问：

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

第 21-26 行最初处于 init 状态。我移动了它们，以防将它们置于自己的功能中会有所帮助，但正如预期的那样，它什么也没做。我真的不知道为什么这不起作用。

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 表单单选按钮

1赞 mplungjan 10/25/2023

缺少事件处理程序。

答：

0赞 mplungjan 10/25/2023 #1

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

下面是一个改进版本，使用委派来检测单选容器中的任何单击。它是您在此处发布的所有代码的完全替代品。

注意我添加到两个 divhidden

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>

您可以通过在无线电上使用 data-attributes 来改进脚本

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>

0赞 BlueWatterBottle 10/26/2023

我尝试了您的第一个解决方案，将该代码添加为函数并在 init 中调用它。似乎什么都没有，但现在它根本不起作用。不过谢谢！

0赞 mplungjan 10/26/2023

我的代码完全替代了你的代码。不要在 init 中调用它！删除 init 和您在问题中发布的其余代码。DOMContentLoaded 是初始化

上一个：如何在qt中取消选中单选按钮

下一个：悬停时如何更改选中的单选按钮的颜色？

表单仅在刷新页面时显示

Form only displays when page is refreshed

评论

评论