Is there a way to read what image map an image is using for an if statement in javascript?

Question

So I'm using image maps to make a fake phone for a project I'm working on. I have it setup through javascript that when an area is clicked in an imagemap, it loads a different image map. So the homescreen has an image map on the apps, and then when you open the gallery, it has another image map on the pictures so they can be selected.

However, I've run into an issue where I need to know which image map is being used in an if statement, so I can have the selected picture on the homescreen. Is there a way to read which image map an image is currently using?

Here's my code in case it's needed

if (!window.PC){
  window.PC = {};
}
PC.changeImage = function (newMap) {
    var image = document.getElementById('myImg');
    if (newMap !== undefined) {
                image.useMap = '#' + newMap;
    }
        if (image.src.match("images/Phone/Gallery/0.png")) {
                variables().pbg = '0';
        }
        else if (image.src.match("images/Phone/Gallery/1.png")) {
                variables().pbg = '1';
        }
        if (variables().pbg = '0' && image.map = 'Homescreen') {
                image.src = "images/Phone/Homescreens/0.png"
        }
        else if (variables().pbg = '1' && image.map = 'Homescreen') {
                image.src = "images/Phone/Homescreens/1.png"
        }
};

I tried image.map, but that didn't work, as well as image.usemap, but I suppose that one is just for changing what image map is being used. Is there a way to do it?

Answer 1

According to MDN's documentation on HTMLImageElement.useMap the useMap property is readable and writable.

The reason for the OP's script failure is that the OP within the if clauses does not compare with e.g. ==/=== but keeps assigning values via =.

console.log(
  document
    .querySelector('img[usemap]')
    .useMap
)

<map name="infographic">
    <area shape="rect" coords="184,6,253,27"
          href="https://mozilla.org"
          target="_blank" alt="Mozilla" />
    <area shape="circle" coords="130,136,60"
          href="https://developer.mozilla.org/"
          target="_blank" alt="MDN" />
    <area shape="poly" coords="130,6,253,96,223,106,130,39"
          href="https://developer.mozilla.org/docs/Web/Guide/Graphics"
          target="_blank" alt="Graphics" />
    <area shape="poly" coords="253,96,207,241,189,217,223,103"
          href="https://developer.mozilla.org/docs/Web/HTML"
          target="_blank" alt="HTML" />
    <area shape="poly" coords="207,241,54,241,72,217,189,217"
          href="https://developer.mozilla.org/docs/Web/JavaScript"
          target="_blank" alt="JavaScript" />
    <area shape="poly" coords="54,241,6,97,36,107,72,217"
          href="https://developer.mozilla.org/docs/Web/API"
          target="_blank" alt="Web APIs" />
    <area shape="poly" coords="6,97,130,6,130,39,36,107"
          href="https://developer.mozilla.org/docs/Web/CSS"
          target="_blank" alt="CSS" />
</map>
<img usemap="#infographic" src="https://interactive-examples.mdn.mozilla.net/media/examples/mdn-info.png" alt="MDN infographic" />