bloppit bloppit - 11 months ago 52
Javascript Question

Why are my elements only showing/hiding when credit card is selected?

This is to add interactivity to an html form.

I am trying to show the payment selection info when the respective option is selected. And then hiding the other options. So if Credit-card is selected, the info the credit card is shown, then the info for bitcoin and paypal will be hidden. and vice versa.

For some reason when I select credit card, everything works,

Yet when I switch to either paypal or bitcoin, nothing is shown at all. How can I fix this? I'd rather not use jQuery.

Here is the respective JS:

// Payment Info section of the form. Display payment sections based on chosen payment option
document.getElementById("payment options").addEventListener("change", function(){
var paymentOption = document.getElementById('payment');
var paymentSelection = paymentOption.value;
var container = document.getElementById('payment-container');
var creditCard = document.getElementById('credit-card');
var bitcoin = document.getElementById('bitcoin');
var paypal = document.getElementById('paypal');

// "Credit Card" payment option isselected by default so display of the #credit-card div...
// hide the "Paypal" and "Bitcoin information.
if(paymentSelection === "credit card") { = 'hidden'; = 'hidden'; = 'visible';

}if(paymentSelection === "paypal") {
// If user selects the "PayPal" payment option, display the Paypal information, and hide the credit card + Bitcoin = 'hidden'; = 'hidden'; = 'visible';

} if(paymentSelection === "bitcoin") {
/// If user selects the "Bitcoin" payment option, display the Bitcoin information, and hide the credit card + paypal. = 'hidden'; = 'hidden'; = 'visible';

And here is the html:

<fieldset id="payment options">
<legend>Payment Info</legend>

<label for="payment">I'm going to pay with:</label>
<select id="payment" name="user_payment">
<option value="credit card">Credit Card</option>
<option value="paypal">PayPal</option>
<option value="bitcoin">Bitcoin</option>
<div id="payment-container">

<div id="credit-card" class="credit-card">

<div class="col-6 col">
<label id="cc-numLbl" for="cc-num">Card Number:</label>
<input id="cc-num" name="user_cc-num" type="text">

<div class="col-3 col">
<label for="zip" id="zipLbl">Zip Code:</label>
<input id="zip" name="user_zip" type="text">

<div class="col-3 col">
<label id="cvvLbl" for="cvv">CVV:</label>
<input id="cvv" name="user_cvv" type="text">

<label>Expiration Date:</label>
<select id="exp-month" name="user_exp-month">
<option value="1">1 - January</option>
<option value="2">2 - February</option>
<option value="3">3 - March</option>
<option value="4">4 - April</option>
<option value="5">5 - May</option>
<option value="6">6 - June</option>
<option value="7">7 - July</option>
<option value="8">8 - August</option>
<option value="9">9 - September</option>
<option value="10">10 - October</option>
<option value="11">11 - November</option>
<option value="12">12 - December</option>
<select id="exp-year" name="user_exp-year">
<option value="2016">2016</option>
<option value="2017">2017</option>
<option value="2018">2018</option>
<option value="2019">2019</option>
<option value="2020">2020</option>
<div id="paypal">
<p>If you selected the PayPal option we'll take you to Paypal's site to set up your billing information, when you click 'Register' below.</p>
<div id="bitcoin">
<p>If you selected the Bitcoin option we'll take you to the Coinbase site to set up your billing information. Due to the nature of exchanging Bitcoin, all Bitcoin transactions will be final.</p>

Answer Source

So first of all, the code works. The visibility does change correctly, but you might get your actual intended effect if you make the following changes:

(the resulting code after these changes can be seen here:

1) Instead of = 'hidden' and = 'visible', use = 'none' and = 'block', respectively. When you use the former (visibility = 'hidden'), the element stops being visible, but does not give up it's area space, so you are left with an empty space where it used to be.

2) Your current code displays all three until an option is selected, rather than the credit card option. In order to display the credit card option by default, you can set the other two options as "hidden" in the HTML declaration.