HTML & CSS need help in understanding on why is my code not calling the Javascript button.

[Noobdeveloper]

<!DOCTYPE html>
<html>
    <head>
        <title>
            HTML MAP TAGS
    </title>
        <style>
            h1 {
               background-color: rgb(202, 164, 114);
               color: #C0C0C0;
               text-align: center;
            }
        </style>
    </head>
    
    <body>
        <h1> Image Maps</h1>
        <p> Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>
        <img src="workplace.jpg" alt="workplace computer" usemap="#workmap">

        <map name="workmap">
        <area shape="rect" coords="33,44,271,346" alt="computer" href="https://en.wikipedia.org/wiki/Computer" target="_blank">
        <area shape="rect" coords="287,172,334,246" alt="phone" href="https://en.wikipedia.org/wiki/Mobile_phone" target="_blank">
        <area shape="circle" coords="341,293,50" alt="coffee" href="https://en.wikipedia.org/wiki/Coffee" target="_blank">

        <h1 style="background-color:#062e69; color:#fff; text-align:center;"> Food items on a table</h1>

        <p style="color:#062e69;"> Click on the crossiant to go to the page containing in-depth information about the crossiant </p>

        <img src="frenchfood.jpg" alt="crossiant" usemap="#crossiant">

        <map name="crossiant">
            <area shape="poly" coords="144,122,187,122,204,164,207,203,183,280,129,340,87,356,53,351,38,325,44,241,126,134" href="https://en.wikipedia.org/wiki/Croissant" onclick="my Function()">
        </map>

        <script>
        function myFunction() {
             alert("You clicked on the crossiant!");
        }
        </script>
    </body>
</html>

 

[BGB]

Your function name is - "myFunction()" but on your html area you have separated the function name like - "my Function()". Remove the space between the function name and it will work.

 

[Noobdeveloper]

It worked, appreciate your help.