将 onchange(this) 从 HTML 移动到 JavaScript，缺少参数，但当我包含它时代码会中断

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

我正在尝试为一家想象中的冰淇淋店编写一个网站，以练习 JavaScript。

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

function hidePickup(x) {
  if (x.checked) {
    document.getElementById("pickupDiv").style.display = "none";
    document.getElementById("deliveryDiv").style.display = "inline";
  }
}

function hideDelivery(x) {
  if (x.checked) {
    document.getElementById("deliveryDiv").style.display = "none";
    document.getElementById("pickupDiv").style.display = "inline";
  }
}

function validate() {

}

function init() {
  hideAAndB()
  var delivery = document.getElementById("delivery");
  var pickup = document.getElementById("pickup");
  if (pickup.checked) {
    hideDelivery();
  }
  if (delivery.checked) {
    hidePickup();
  }
}

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/script1.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" onchange=hidePickup(this) value="Delivery"><br>
      <label for="pickup">Pickup</label>
      <input type="radio" id="pickup" name="chooseDiv" onchange=hideDelivery(this) value="Pickup"><br>
      <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>
  </form>
  </div>
</body>

如您所见，脚本存在一些问题。最值得注意的是 hideDelivery 和 hidePickup 函数的函数调用中没有参数。但是，每当我尝试为每个需要参数的函数调用包含一个参数时，页面的功能就会停止工作。我尝试过在 init 中包含变量（在 init 中）取货和交付，以便 init 包含以下代码：

hideAAndB()
var delivery = document.getElementById("delivery");
var pickup = document.getElementById("pickup");
if (pickup.checked) {
        hideDelivery(pickup);
    }
    if (delivery.checked) {
        hidePickup(delivery);
    }

但这似乎不起作用。除此之外，您可能会注意到 HTML 中有两个函数调用 - 都使用 this 作为参数。如果我将这些函数调用移至 JavaScript 而不是将它们留在 HTML 中，这会是什么样子？

我希望它在 init 中的相关函数调用中包含参数时能够正常运行。

javascript html dom parameters
1个回答
0
投票

您将 

this
作为参数发送给两个函数，这两个函数只会将 HTML 元素传递给事件处理程序。 如果您想知道单击了哪个单选按钮，请传递 
event
作为参数，您将在处理函数中收到一个事件对象。

如果您在两个函数中都使用

event.target.checked
，它将根据单选按钮是否选中而返回 true 或 false。您可以在此基础上构建进一步的逻辑

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