JavaScript — как избежать сопоставления тега карты с гиперссылкой и вызова функции onclick.

Я пытаюсь заставить изображение с 4 кнопками работать как 4 кнопки, сопоставленные с 4 различными функциями вместо гиперссылок по умолчанию (href = #).
Я хочу, чтобы пользовательские данные добавлялись, редактировались, удалялись или обновлялись на этой странице PHP вместо явных гиперссылок на разные страницы.
Даже если мне придется прибегнуть к другим страницам, эти данные необходимо отправить с помощью функций post или get и т. Д. Или с помощью собственной функции. Но проблема в том, что после сопоставления этого изображения с 4 разными кнопками и даже удаления href и добавления onclick = myfunction () ничего не происходит, и если я добавлю href, он не перейдет к myfunction после нажатия и вместо этого перейдет по ссылке href ,
пожалуйста помоги.

<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>

образ:

Образ

0

Решение

  1. Я отвечу в несколько шагов.
    Во-первых, ваш html-комментарий в строке 98 неверен.
    Это:

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

но это должно выглядеть так:

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

Из-за неправильного закрытия комментария (которое не закрывается) — каждая строка под этим комментарием тоже была закомментирована.

  1. Ваш function printr(ss) не закрыто Прошлой } закрытие switch,
  2. Вы имеете onclick="printr(aa)" вместо onclick="printr('aa')", Без ' скобки вы даете аргумент функции несуществующей переменной aa, С помощью скобок вы даете только строку.

Моя версия кода:

  <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="http://web-answers.org/wp-content/uploads/2019/02/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/

Это не такой понятный код, как мог бы быть, но он работает сейчас.
Кстати — я удалил php разделы и т.д., чтобы не мешать себе. Я надеюсь, вы понимаете, что я сделал. Помните, что если у вас есть ошибка в javascript — она ​​просто не будет выполняться.

0

Другие решения

Других решений пока нет …