更改 Javascript 中的 CSS 显示样式

Question

我的 javascript 代码有一点问题。 我试图让我的#showAddress display: block单击/选中deliverservice单选按钮时阻止。 我尝试查看一些 Stack Overflow 帖子，但其中很多帖子对于我目前的水平来说太高级了（我刚开始使用 JavaScript）。

<label>Delivery Type</label>
    <input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup
    <input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver
</p>

<div id="showAddress">
<p>
<label for="deliveryAddress">Delivery Address</label><br>
<input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br>
    <input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br>
    <input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br>
    <a href="#" id="sameAddress">Billing address same as Above</a>
</div>
<p>
    <label for="billingAddress">Billing Address</label><br>
    <input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br>
    <input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br>
    <input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br>
</p>
<p>

我相信错误发生在我的 JavaScript 中，但它只有两个功能。 前两行是我的初始化 function，它在下面调用我的第二个 function。

var showDelivery = document.getElementById("deliverService");
showDelivery.onclick =  showAddress;

function showAddress() {
    document.getElementById("showAddress").style.display= 'block';
}

#additionalInformation, #showAddress {
    display: none;
}

Answer 1

你应该改变这一行

showDelivery.onclick =  showAddress;

像这样：

showDelivery.onclick = function(){showAddress();};

Answer 2

Alternatively, you can set the onclick listener on the input element itself (in the html), to directly call the javascript function from the HTML element, rather than cluttering your JavaScript

 <input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver

 function showAddress() { document.getElementById("showAddress").style.display= 'block'; }

 #additionalInformation, #showAddress { display: none; }

 <label>Delivery Type</label> <input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup <input type="radio" name="delivery" value="Deliver" id="deliverService" onclick="showAddress()">Deliver <div id="showAddress"> <p> <label for="deliveryAddress">Delivery Address</label><br> <input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br> <input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br> <input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br> <a href="#" id="sameAddress">Billing address same as Above</a> </p> </div> <p> <label for="billingAddress">Billing Address</label><br> <input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br> <input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br> <input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br> </p>

编辑：使用addEventListener的示例

document.getElementById("deliverService").addEventListener("click", function() {
        document.getElementById("showAddress").style.display= 'block';
});

 document.getElementById("deliverService").addEventListener("click", function() { document.getElementById("showAddress").style.display= 'block'; });

 #additionalInformation, #showAddress { display: none; }

 <label>Delivery Type</label> <input type="radio" name="delivery" value="Pickup" id="pickupService">Pickup <input type="radio" name="delivery" value="Deliver" id="deliverService">Deliver <div id="showAddress"> <p> <label for="deliveryAddress">Delivery Address</label><br> <input type="text" name="deliveryAddress" id="deliveryAddress" placeholder="Enter street number + name"><br> <input type="text" name="deliverySuburb" id="deliverySuburb" placeholder="Enter your [suburb], [state]"><br> <input type="text" name="deliveryAddress" id="deliveryPostcode" placeholder="Enter your postcode"><br> <a href="#" id="sameAddress">Billing address same as Above</a> </p> </div> <p> <label for="billingAddress">Billing Address</label><br> <input type="text" name="deliveryAddress" id="billingAddress" placeholder="Enter street number + name"><br> <input type="text" name="deliverySuburb" id="billingSuburb" placeholder="Enter your [suburb], [state]"><br> <input type="text" name="deliveryAddress" id="billingPostcode" placeholder="Enter your postcode"><br> </p>