DIVがdisplay = 'none'（JavaScript onclick）に変更されないのはなぜですか？

Question

私はしばらくの間これをやってきましたが、なぜ私のDIVを表示するように戻すことができないのかわかりません。それは、私のCSSファイルのdisplay：noneで始まります。ボタンをクリックすると、スタイルがdisplay = 'block'に変更されます。私はそれをクリックするとDIVを閉じたい出口ラベルを持っています。私はvisibility = 'hidden'でそれをすることができますが、なぜdisplay = 'none'がうまくいかないのか分かりません。

<button class="btn" onclick="document.getElementById('abo').style.display = 'block';">Learn More</a> 
     <div id="abo"> 
      <?php include 'about-more.php';?> 
      <div id="about-more"> 
      <h2>Learn More</h2><br> 
      <a href="http://youngmarists.org/">For more info on Young Marists</a><br> 
      <p>Contributers to this website</p> 

      <?php 
       foreach($profiles as $profile => $item): 
      ?> 

      <section class="profile"> 
       <h4 class="name"><?php echo $item['name'];?></h4> 
       <p class="role"><?php echo $item['role'];?></p> 
       <img class="profile-img" src="profiles/<?php echo $item['img'];?>"></img> 
      </section> 

      <?php endforeach;?> 

      <i class="fa fa-times-circle fa-2x" onclick="document.getElementById('abo').style.display = 'none';"; style="position:fixed;top:6%;right:18%;"></i> 
      </div> 

Answer 1

コードの先頭には、終了タグが必要です。今あなたがそこに持っている：

<button class="btn" onclick="document.getElementById('abo').style.display = 'block';">Learn More</a> 

しかし、それは次のようになります。

<button class="btn" onclick="document.getElementById('abo').style.display = 'block';">Learn More</button> 

https://jsfiddle.net/p4pun8qz/

また、余分なセミコロンがここにあります：

onclick="document.getElementById('abo').style.display = 'none';"; 

てみ：

onclick="document.getElementById('abo').style.display = 'none';" 

Answer 2

内部のonClickイベントがトリガされることはありませんあなたは<button>以内にあなたの<i>タグを入れ子にしているし、あなたのdisplay = 'block'のonClickは、ボタン自体にあるので。

HTMLを少し並べ替えたり、最初のonClickを別の場所に移動して修正する必要があります。 <i>要素を<button>から移動すると、私は何を意味するのか分かります。

<button>タグがすべてをラップするつもりがない場合は、現在開いているままにしてください。

Answer 3

<button>は、最初の行に</a>で終了しています。 </a>を</button>に変更すると正常に動作します。

また、onclick属性の後に<i>のセミコロンが多すぎます。