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

Fabio Assuncao · Accepted Answer · 2019-10-04 01:00:51Z

1

You should change this line

showDelivery.onclick =  showAddress;

to something like this:

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

answered Oct 4, 2019 at 1:00

Fabio Assuncao

6144 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

PandaPlaysAll Over a year ago

Isnt this putting a function within a function? im just trying to reduce clutter on the page

Fabio Assuncao Over a year ago

You are just telling the function that should be executed onclick. There are other ways to do this that you can check here developer.mozilla.org/en-US/docs/Web/Guide/Events/…

Fabio Assuncao Over a year ago

And you can check for eventlisteners too developer.mozilla.org/en-US/docs/Web/API/EventTarget/…

PandaPlaysAll Over a year ago

I am using Chrome and it didnt seem to solve the problem.

Fabio Assuncao Over a year ago

You can try put your script before </body>. You can check it here jsfiddle.net/9bmnrcft

Snel23 · Accepted Answer · 2019-10-04 01:40:30Z

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>

I found this method works... however, isnt there a way to do it like i was trying. To call it when it is initialised in javascript. Otherwise i have to weed through my html
Sure is, i have added another example for using addEventListener to listen for a click, and execute some arbitrary function

Collectives™ on Stack Overflow

Change a CSS display style in Javascript

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related