爲什麼我的元素只在選擇信用卡時才顯示/隱藏？

Question

這是爲html表單添加交互性。

我試圖在選擇相應選項時顯示付款選擇信息。然後隱藏其他選項。所以如果選擇信用卡，信用卡顯示的信息，那麼比特幣和貝寶的信息將被隱藏。反之亦然。

，當我選擇信用卡某種原因，一切正常，

然而，當我切換到無論是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.visibility = 'hidden'和element.style.visibility = 'visible' ，分別使用element.style.display = 'none'和element.style.display = 'block'。當您使用前者（visibility ='hidden'）時，該元素停止可見，但不會放棄其區域空間，因此您將留下原來的空白空間。

2）您的當前代碼顯示全部三個選項，直到選擇一個選項，而不是信用卡選項。爲了默認顯示信用卡選項，您可以在HTML聲明中將其他兩個選項設置爲「隱藏」。

Answer 2

我創建了包含代碼here小提琴。

正如您所看到的，它可以按照您的要求正確運行，但是，因爲您使用的是.visibility，包含付款信息的div仍佔用其原始區域。我的猜測是，你的css容器的大小隻是爲了佔用信用卡信息，因此你爲什麼看不到你的其他html。

爲了解決您的問題，請嘗試使用display而不是visibility。我已更新示例here。