JSFiddle - React, Tailwind, and code Playground

by Rachel Gallen

HTML

<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://hecoira.leeds.ac.uk/wp-content/uploads/sites/164/2019/08/0D174AF3-1221-42A4-878E-305FD6D829BF-e1564773811882.jpeg" usemap="#image-map">

<map name="image-map">
    <area target="" alt="IVStand" title="IVStand" href="javascript:ClickOnImageMap('IVStand');" coords="147,258,186,208" shape="rect">
    <area target="" alt="Chair" title="Chair" href="javascript:ClickOnImageMap('Chair');" coords="68,262,163,343" shape="rect">
    <area target="" alt="DoorHandle" title="DoorHandle" href="javascript:ClickOnImageMap('DoorHandle');" coords="17,237,62,371" shape="rect">
    <area target="" alt="Bed" title="Bed" href="javascript:ClickOnImageMap('Bed');" coords="176,154,327,224" shape="rect">
    <area target="" alt="Window" title="Window" href="javascript:ClickOnImageMap('Window');" coords="159,119,43,8" shape="rect">
    <area target="" alt="Trolley" title="Trolley" href="javascript:ClickOnImageMap('Trolley');" coords="53,129,138,162" shape="rect">
    <area target="" alt="Sink" title="Sink" href="javascript:ClickOnImageMap('Sink');" coords="503,328,410,284" shape="rect">
    <area target="" alt="ClinicalWaste" title="ClinicalWaste" href="javascript:ClickOnImageMap('ClinicalWaste');" coords="297,327,406,374" shape="rect">
    <area target="" alt="AlcoholGel" title="AlcoholGel" href="javascript:ClickOnImageMap('AlcoholGel');" coords="399,258,504,158,504,241" shape="rect">
</map>

<h3>
Clicks
</h3>
<p id="clicks">

</p>

CSS

#clicks p {
  width: 100%;
  max-height: 35px;
  overflow: auto;
}

JavaScript

var noclicks = 0;

  ClickOnImageMap = function(area) {
    var oldHtml = document.getElementById("clicks").innerHTML;
    var newHTML, areaclicks;
    var now = new Date();
    const area1 = 1;
    var spanid = "";


    if (oldHtml.indexOf(area) == -1) {
      var para = document.createElement("P");
      para.setAttribute("id", "" + area + "");
      var cont = document.createTextNode("");
      para.appendChild(cont);
      spanid = area + 1;
      para.innerHTML = area + " Clicks: " + '<span id= "' + spanid + '">' + area1 + '</span>' + " " + now.toLocaleString();
      const info = document.getElementById("clicks");
      info.appendChild(para);
      //document.getElementById("clicks").innerHTML =para.innerHTML;

    } else {

      var addto = document.getElementById(area);
      newHTML = addto.innerHTML + " " + now.toLocaleString();
      var areaclicks = ((addto.innerText.match(/,/g) || []).length) + 1;
      console.log("Clicks is " + areaclicks);
      spanid = area + 1;
      //console.log(spanid);
      addto.innerHTML = newHTML;
      document.getElementById(spanid).innerHTML = areaclicks;

    }
    //All clicks
    // noclicks++;
    //console.log(noclicks);
  }