javascript - 为什么我的元素仅在选择信用卡时显示/隐藏？

Question

这是为了向 html 表单添加交互性。

我试图在选择相应选项时显示付款选择信息。然后隐藏其他选项。因此，如果选择信用卡，则显示信用卡信息，然后隐藏比特币和 Paypal 信息。反之亦然。

出于某种原因，当我选择信用卡时，一切正常，

然而，当我切换到 Paypal 或比特币时，什么也没有显示。我怎样才能解决这个问题？我宁愿不使用 jQuery。

下面是相应的 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") {
        bitcoin.style.visibility = 'hidden';
        paypal.style.visibility = 'hidden';
        creditCard.style.visibility = 'visible';

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

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

这是 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>
        </select>
        <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>

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

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

          <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>  
          <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>                      
          </select>                                
        </div> 
        <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>
        <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>
        </div> 
      </fieldset>  

Answer 1

首先，代码可以工作。可见性确实会正确更改，但如果进行以下更改，您可能会获得实际的预期效果:

(这些更改后的结果代码可以在这里看到:https://jsfiddle.net/fojbgaxh/)

1) 使用 element.style.display 而不是 element.style.visibility = 'hidden' 和 element.style.visibility = 'visible' = 'none' 和 element.style.display = 'block' 分别。当您使用前者(visibility = 'hidden')时，该元素将不再可见，但不会放弃其区域空间，因此您会在原来的位置留下一个空白空间。

2) 您当前的代码会显示所有三个选项，直到选择一个选项(而不是信用卡选项)。为了默认显示信用卡选项，您可以在 HTML 声明中将其他两个选项设置为“隐藏”。