クレジットカードが選択されていると、要素が表示/非表示になるのはなぜですか？

Question

これは、HTMLフォームに対話性を追加するためのものです。

それぞれのオプションが選択されているときに支払い選択情報を表示しようとしています。そして、他のオプションを隠す。クレジットカードが選択されている場合は、クレジットカードの情報が表示され、ビットコインとペイパルの情報は表示されません。およびその逆。私はPayPalのか、ビットコインのいずれかに切り替えると、いくつかの理由で

私はクレジットカードを選択し、すべての作品、

はまだ、何もまったく表示されません。これをどうすれば解決できますか？私はむしろjQueryを使用しません。ここで

は、それぞれのJSです：

<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

まず、コードが機能します。代わりにelement.style.visibility = 'hidden'とelement.style.visibility = 'visible'の）

1を

視界が正しく変更さんが、あなたは次のように変更します場合は、あなたの実際の意図した効果を得る可能性があります：

（https://jsfiddle.net/fojbgaxh/これらの変更は、ここで見ることができます後に得られるコード）それぞれelement.style.display = 'none'およびelement.style.display = 'block'を使用します。前者（visibility = 'hidden'）を使用すると、要素は表示されなくなりますが、領域のスペースをあきらめることはありません。したがって、以前は空のスペースが残っています。

2）現在のコードは、クレジットカードオプションではなくオプションが選択されるまで3つすべて表示されます。デフォルトでクレジットカードオプションを表示するには、HTML宣言で他の2つのオプションを「非表示」に設定することができます。

Answer 2

私はあなたのコードhereを含むフィドルを作成しました：

// 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です。

ご覧のとおり、お客様の要件に応じて正しく動作しますが、.visibilityを使用している場合、支払い情報を含む部門は元の領域を引き継ぎます。私の推測では、あなたのCSSコンテナは、クレジットカード情報を取るためにサイズが決められているので、他のHTMLは見えません。

問題を解決するには、代わりにvisibilityの代わりにdisplayを使用してみてください。私は例hereを更新しました。