Question

我知道之前已经提出了类似的问题，但似乎没有一个能解决我的问题。我正在尝试将默认设置设置为送货地址等于帐单邮寄地址，并选中复选框。单击复选框后，将显示表单的一部分，并清除先前隐藏的表单值/输入文本，以便用户可以输入单独的计费信息。我已经完成了所有工作jsfiddle，但在我的生活中不能让它在浏览器中工作。任何帮助，将不胜感激。

PS。抱歉格式不稳定，我无法弄清楚如何在遵循格式指南的同时优雅地粘贴代码。

   <form name="checkout" method="post" id="payment-form" action="/templates/dropindemo.php">
<section id="shipping">
<h2>Shipping</h2>

<label for="first">First name</label>
<input type="text" autocomplete="given-name" placeholder="Hermionie" name="fname" id="first">

<label for="last">Last name</label>
<input type="text" autocomplete="family-name" placeholder="Granger" name="lname" id="last">
<br>

<label for="address">Address</label>
<input type="text" autocomplete="street-address" placeholder="12 Grimmauld Place" name="address" id="address">

<label for="city">City</label>
<input type="text" autocomplete="address-level2" placeholder="London" name="city" id="city">
<br>

<label for="state">State</label>
<input type="text" autocomplete="address-level1" placeholder="Greater London" name="state" id="state">

<label for="zip">Postal Code</label>
<input type="number" pattern="\d*" autocomplete="postal-code" placeholder="WC1N1 9LX" name="zip" id="zip">

<label for="country">Country</label>
<select name="country" id="country">
  <option selected hidden disabled value="">United Kingdom</option>
  <option value="USA">United States</option>
</select>
<br>
<label for="last">E-mail</label>
<input type="email" autocomplete="email" placeholder="hermionie@spew.org" name="email" id="email">
<br>
<input type="checkbox" onclick="onPageLoad()" id="shiptobill" />
<label for="shiptobill">My shipping and billing info are the same</label>
</section>
<section id="billing">
    <h2>Billing</h2>
  <label for="first">First name</label>
 <input type="text" autocomplete="given-name" placeholder="Harry" name="bfname" id="bfirst">

<label for="last">Last name</label>
<input type="text" autocomplete="family-name" placeholder="Potter" name="blname" id="last">
<br>

<label for="address">Address</label>
<input type="text" autocomplete="street-address" placeholder="4 Private Drive" name="baddress" id="address">

<label for="city">City</label>
<input type="text" autocomplete="address-level2" placeholder="Little Winging" name="bcity" id="city">
<br>

<label for="state">State</label>
<input type="text" autocomplete="address-level1" placeholder="Surrey" name="bstate" id="state">

<label for="zip">Postal Code</label>
<input type="number" pattern="\d*" autocomplete="postal-code" placeholder="RG12 9FG" name="bzip" id="zip">

<label for="country">Country</label>
<select name="bcountry" id="country">
  <option selected hidden disabled value="">United Kingdom</option>
  <option name="USA" value="USA">United States</option>
</select>
<br>
</section>
   </form>

和javascript ...

    window.onload = toggle(), onPageLoad();

    function toggle() {
  if (document.getElementById("shiptobill").checked == true) {
 document.getElementById("shiptobill").checked = false;
  } else {
 document.getElementById("shiptobill").checked = true;
  }
};

  function onPageLoad() {
  var inputs = 
  document.getElementById("shipping").getElementsByTagName("input");
 var mirror = 
  document.getElementById("billing").getElementsByTagName("input");
 for (var i = 0; i < inputs.length; i++) {
   if (document.getElementById("shiptobill").checked === true) {
  var att = inputs[i].getAttribute("name");
  inputs[i].setAttribute('onkeyup', 'document.checkout.b' + att + '.value=this.value');
  document.getElementById('billing').style.display = ""; //would normally be set to "none" in production
    } else {
  document.getElementById('billing').style.display = "block";
  inputs[i].setAttribute('onkeyup', "");
  mirror[i].value = "";
 }
  }
 };

Answer 1

window.onload = toggle(), onPageLoad();

含义...

立即执行toggle
将toggle的返回值指定给onload
- toggle没有return语句，因此返回undefined
- onload分配一个函数，而不是undefined
立即执行onPageLoad

你几乎肯定会遇到getElementById failing because the element doesn't exist yet。如果您在浏览器中查看Developer Tools的控制台，这可能很明显。 查看浏览器为您提供的错误消息非常重要。

如果您想通过为toggle分配内容来触发加载事件时调用onPageLoad和onload，则需要指定功能。< / p>

function run_on_load() {
    toggle();
    onPageLoad();
}
window.onload = run_on_load; // No ()! They would *call* the function.

现代JS使用addEventListener，所以你可以改为：

addEventListener("load", toggle);
addEventListener("load", onPageLoad);

Javascript默认送货地址等于页面加载时的帐单邮寄地址，适用于jsfiddle，但不适用于浏览器？

1 个答案: