javascript - 在 Javascript 中更改 CSS 显示样式

Question

我的一些 javascript 代码有问题。 当单击/选中 deliverservice 单选按钮时，我试图让我的 #showAddress 显示为 display:block。 我已经尝试查看一些 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 中，但它只是两个函数。前两行是我的初始化函数，它在下面调用我的第二个函数。

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();};