how to avoid maps tag mapping to hyperlink and calling an onclick function instaed html php js

I am trying to make a 4-buttoned image to work as 4 buttons mapped to 4 different functions instead of default hyperlinks (href=#).
What I wish is that the user data is added edited deleted or updated within this PHP page instead of explicit hyperlinks to different pages.
Even if I have to resort to other pages, this data needs to be submitted via functions of the post or get etc or some own function. But the issue is that after mapping this image as 4 different buttons and even removing the href and adding onclick=myfunction(), it does nothing and if I add href, it doesn't go to myfunction after clicking and takes to href link instead.
please help.

<html>
<head>
    <title>Panel
    </title>
    <?php
    require('connect.php');   //working connection
    $queryU = "SELECT username FROM `user`";
    $listU  = $connection->query($queryU);
    if ($listU->num_rows > 0) {
        while ($rowu = $listU->fetch_assoc()) {
            $y = $rowu['username'];    //working script
        }
    }
    ?>
    <style>
        body {
            background-image : url("main.jpg");
            opacity          : 40%;
            font-family      : AlphaMaleModern;
            text-align       : center;
            color            : #fff;
            font-size        : 26px;
        }    
        .a {
            height : 90%;  width  : 45%;
        }

        .img {
            margin-top : 20%;
            position   : relative;
        }    
        .list {
            float    : right;
            position : absolute;
            border   : lime solid;
            width    : 50%;
            z-index  : -1;
            position : static;
            top      : 10%;
            height   : 90%;
        }    
        #userlist {
            width       : 100%;
            opacity     : 0.8;
            font-family : AlphaMaleModern;
            text-align  : center;
            font-size   : 28px;
            height      : 100%;
        }    
        .img:hover, #userlist:hover {
            opacity : 1;
        }
    </style>
    <script>
        //test function 1 for on click call but not working
        document.getElementById('aa').on(click, function (e) {
                e.preventDefault();
                alert("CLICKED");
            }
        );
        //test function 2 for on click call but not working
        function printr(ss) {
            var x = document.getElementById('ss').name;
            alert(x);
            switch (x) {
                case "aa":
                    alert("AA");
                    break;
                case "b":
                    alert("B");
                    break;
                case "c":
                    alert("C");
                    break;
                case "d":
                    alert("D");
                    break;
            }
    </script>
</head>
<body>
<fieldset name="Users" class="a" style="float:right;">
    <legend>USERS
    </legend>
    <div id="user" class="user" style="">
        <img src="panel/panel.png" class="img" alt="" usemap="#Map1"/>
        <map name="Map1" id="Map1">
            <area alt="" title="" href="#" id="aa" onclick="printr(aa)" 
                  shape="poly" coords="200,8,16,10,104,108"/>
            <area alt="" title="" href="#" id="b" onclick="printr(b)" 
                  shape="poly" coords="205,14,108,109,204,197"/>
            <area alt="" title="" href="#" id="c" onclick="printr(c)" 
                  shape="poly" coords="8,201,98,110,8,15"/>
            <area alt="" title="" href="#" id="d" onclick="printr(d)" 
                  shape="poly" coords="104,113,16,208,204,207"/>
        </map>
        <div class="list">
            <select id="userlist" size="20">
                <option>
                    <?php echo $y; ?>
                </option>
                <!--list of users from mysql database (working good)-->
            </select>
        </div>
</fieldset>
</div>
</body>
</html>

image:

Solution

I'll answer in few steps. Firstly – your html block comment in 98 line is wrong. It is:

<!--list of users from mysql database (working good) --!>

but is should looks like that:

Because of that wrong comment closing (which isn't close) – every line under that comment was commented too.

Your function printr(ss) isn't closed. Last } is closing of switch.
You've onclick="printr(aa)" instead of onclick="printr('aa')". Without ' brackets you're giving function argument nonexistent variable aa. With brackets you're giving just string.

My version of code:

  <html>
  <head>
    <title>Panel
    </title>

    <style>
      body{
        background-image: url("main.jpg");
        opacity:40%;
        font-family: AlphaMaleModern;
        text-align:center;
        color:#fff;
        font-size: 26px;
      }
      .a{
        height:90%;
        width:45%;
      }
      .img{
        margin-top:20%;
        position:relative;
      }
      .list{
        float:right;
        position:absolute;
        border:lime solid;
        width:50%;
        z-index:-1;
        position:static;
        top:10%;
        height:90%;
      }
      #userlist{
        width:100%;
        opacity: 0.8;
        font-family:AlphaMaleModern;
        text-align:center;
        font-size:28px;
        height:100%;
      }
      .img:hover,#userlist:hover{
        opacity: 1;
      }
    </style>
    <script>
        function printr(ss)
        {
            switch (ss)
            {
                case "aa":
                alert("AA");
                break;
                case "b":
                alert("B");
                break;
                case "c":
                alert("C");
                break;
                case "d":
                alert("D");
                break;
            }
        }
    </script>
  </head>
  <body>
    <fieldset name="Users" class="a" style="float:right;">
      <legend>USERS
      </legend>
      <div id="user" class="user"  style="">
        <img src="https://i.sstatic.net/7A0Ky.png" class="img" alt="" usemap="#Map1" />
        <map name="Map1" id="Map1">
          <area alt="" title="" href="#" id="aa" onclick="printr('aa')" shape="poly" coords="200,8,16,10,104,108" />
          <area alt="" title="" href="#" id="b" onclick="printr('b')" shape="poly" coords="205,14,108,109,204,197" />
          <area alt="" title="" href="#" id="c" onclick="printr('c')" shape="poly" coords="8,201,98,110,8,15" />
          <area alt="" title="" href="#" id="d" onclick="printr('d')" shape="poly" coords="104,113,16,208,204,207" />
        </map>
        <div class="list"  >
          <select id="userlist" size="20">
            <option>

            </option>   
            <!--list of users from mysql database (working good) -->
</select>
</div>
</fieldset>
</div>
</body>
</html>

https://jsfiddle.net/9ks9kxzw/

That's not as clear code as it could be, but it's working now. By the way – I've removed php sections etc. to not disturb myself. I hope you understand what have I done. Remember that if you have error in javascript – it'll just don't execute.