Get an element by ID from html to js

Question

I have created a clickable area in an image and I want to get the Id of this area in Javascript so I can fill it with color. I am new in both html and js.

var myElement = document.getElementById("map1");

<img src={marina} alt="marinamap" usemap="#workmap" />
<map name="workmap">
     <area shape="rect" coords="320,220,340,210" alt=" parking" href="" id="map1"  >
</map>

I am getting the error :

a constructor,method,accessor or property was expected.

Any advice?

Answer 1

Well, it doesn't look that <area> tag is styleble at all... if all your areas are rectangular o round(ish) you may consider using just div's or any other tags positioned absolutely over the image like so... if those areas have more complex shapes you may need to use SVG instead... svg example

[ORIGINAL WRONG ANSWER - before comment received]

Probably related to "Can I have an onclick event on a imagemap area element?"

You may do what you need in the onclick event of your area like so:

<area shape="rect" 
      coords="320,220,340,210" 
      alt="parking" 
      href="#map1_target" 
      id="map1"  
      onclick="event.preventDefault(); this.style.background='#a00';"
>