svg map open box when click but can not close it-CodePudding

cant close the box the code im using https://codepen.io/dudleystorey/pen/vNoeyW

var canadamap = document.getElementById("canada-map"),
    provinceInfo = document.getElementById("provinceInfo"),
    allProvinces = canadamap.querySelectorAll("g");
    canadamap.addEventListener("click", function(e){ 
        var province = e.target.parentNode;
        if(e.target.nodeName == "path") {
        for (var i=0; i < allProvinces.length; i  ) {
            allProvinces[i].classList.remove("active");
        }
        province.classList.add("active");
        var provinceName = province.querySelector("title").innerHTML,
        provincePara = province.querySelector("desc p");
        sourceImg = province.querySelector("img"),
        imgPath = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";
        provinceInfo.innerHTML = "";
        provinceInfo.insertAdjacentHTML("afterbegin", "<img src=" imgPath   sourceImg.getAttribute('xlink:href') " alt='" sourceImg.getAttribute('alt') "'><h1>" provinceName "</h1><p>" provincePara.innerHTML "</p>");
        provinceInfo.classList.add("show");
        }
    })

CodePudding user response：

you can set else to your code, to hide the info when click outside the map

var canadamap = document.getElementById("canada-map"),
provinceInfo = document.getElementById("provinceInfo"),
allProvinces = canadamap.querySelectorAll("g");
canadamap.addEventListener("click", function(e){ 
    var province = e.target.parentNode;
for (var i=0; i < allProvinces.length; i  ) {
        allProvinces[i].classList.remove("active");
    }
    if(e.target.nodeName == "path") {
    
    province.classList.add("active");
    var provinceName = province.querySelector("title").innerHTML,
    provincePara = province.querySelector("desc p");
    sourceImg = province.querySelector("img"),
    imgPath = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/";
    provinceInfo.innerHTML = "";
    provinceInfo.insertAdjacentHTML("afterbegin", "<img src=" imgPath   sourceImg.getAttribute('xlink:href') " alt='" sourceImg.getAttribute('alt') "'><h1>" provinceName "</h1><p>" provincePara.innerHTML "</p>");
    provinceInfo.classList.add("show");
    } else {
  provinceInfo.classList.remove("show");
  provinceInfo.innerHTML = "";
}
})