title: Why is this JavaScript not working on my website?
body: <p>In summary, I'm trying to hide the text next to an image when the web page loads and then display the text when the user hovers over the corresponding image. </p>
  
  <p>I can't seem to get it to display the text. Here's the code:</p>
  
  <pre><code>&lt;section class = muliticolumn &gt;
          &lt;img class="menuSmall" src="../images/margherita.png" onmouseover="showMargTopp()"&gt;
          &lt;h2&gt;Margherita&lt;/h2&gt;
          &lt;p id="margTopp"&gt;Tomato, mozzarella and basil&lt;/p&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>This is the code for the image and text.</p>
  
  <pre><code>#margTopp{display:none;}
  </code></pre>
  
  <p>CSS.</p>
  
  <pre><code>function showMargTopp() {
          document.getElementByID("margTopp").style.display="block";
      }
  </code></pre>
  
  <p>JavaScript.</p>
  
  <p>I've tried a couple different things but I can't seem to get it to work.
  Thanks for any help.</p>