Change a CSS display style in Javascript

Question

I have a problem with a bit of my javascript code. I am trying to get my #showAddress to display: block when the deliverservice radio button is clicked/checked. I've tried looking at some Stack Overflow posts but a lot of them are too advanced for my current level (I just started 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>

I believe the error is happening in my JavaScript, however it's only two functions. The first two lines are my initialise function, which is calling my second function down below.

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

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

#additionalInformation, #showAddress {
    display: none;
}

Answer 1

You should change this line

showDelivery.onclick =  showAddress;

to something like this:

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>

EDIT: An example of using 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>