Why is this JavaScript not working on my website? [closed]

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.

I can’t seem to get it to display the text. Here’s the code:

<section class = muliticolumn >
        <img class="menuSmall" src="../images/margherita.png" onmouseover="showMargTopp()">
        <h2>Margherita</h2>
        <p id="margTopp">Tomato, mozzarella and basil</p>
    </section>

This is the code for the image and text.

#margTopp{display:none;}

CSS.

function showMargTopp() {
        document.getElementByID("margTopp").style.display="block";
    }

JavaScript.

I’ve tried a couple different things but I can’t seem to get it to work. Thanks for any help.

Answer

ID should be Id in your function.

function showMargTopp() {
  document.getElementById("margTopp").style.display="block";
}

If you want it to be hidden again when you stop hovering, you will need another function for the onmouseout event.

function hideMargTopp() {
  document.getElementById("margTopp").style.display="none";
}

A simpler solution to this would be to use CSS :hover