javascript - Hyperlink does not work in HTML code that connected with JS code

Question

Welcome To Ask or Share your Answers For Others

javascript - Hyperlink does not work in HTML code that connected with JS code

posted Oct 7, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - Hyperlink does not work in HTML code that connected with JS code

I'm creating an interactive map for office locations to make it easier for clients to reach out to the nearest office. I use HTML file, CSS file, and JS file together for this map. Everything works fine except when your point out a location on the map, information about the nearest office should popup on the right side of the screen. This information includes a hyperlink to the office's website. The problem is that the hyperlink looks fine (blue and underlined) but it is not clickable. I mean the link does not work.

I tried all possible solutions to solve that. Can you help me? Thanks in advance.

This is the HTML file


    <!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Interactive Geographical Map w/ SVG &amp; JavaScript</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./vasbdc.css">

</head>
<body>

  <?xml version="1.0" encoding="UTF-8" standalone="no"?>
  <svg
     xmlns:dc="http://purl.org/dc/elements/1.1/"
     xmlns:cc="http://creativecommons.org/ns#"
     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
     xmlns:svg="http://www.w3.org/2000/svg"
     xmlns="http://www.w3.org/2000/svg"
     xmlns:xlink="http://www.w3.org/1999/xlink"
     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
     inkscape:export-ydpi="96"
     inkscape:export-xdpi="96"
     inkscape:export-filename="/Users/maqabljh/OneDrive/test.png"
     inkscape:version="1.0rc1 (09960d6, 2020-04-09)"
     sodipodi:docname="test.svg"
     id="vasbdc-map"
     viewBox="-44643 -21466 74862 32467"
     version="1.1"
     width="1260"
     height="585">



     <g id="City1" transform="translate(1615 46.592)">
       <title>New University Office - Central Region</title>
       <desc>
         <image xlink:href="1234.jpg" alt="LOGO"></image>
         <p>
           <br>Tel: 111.222.3333
           <br><a href="http://www.google.com/">www.123.com</a>
        </p>
      </desc>

  <path d="m26870-5569l816-130 1345-188 26 13 21 10-1 35-62 40-61-6-41 15-109 140 4 36 26 55-82-11-67-5-51-1-41-25-16 85 15 71-6 55-27 151 25 56 31 5h46l15 41-11 80-52 45-25-10-51-6-36 5-26 5-21 25-10 25-1 40 15 36 15 45 10 51 20 50-5 45-6 45-26 35-21 20v56l-52 65-31 20-36 55h-26l-36 4-57 35-20-25 11-35 26-25 36-65 1-51 15-25 26-65 31-15 31-30 42-30 5-30-15-20-62-26-20 10-88 35v10l-52 90-73 191-47 75-47 85 15 66 66 10 62-14 62 5 40 21-25 19-21 20-42 61-10 45-42 50-31 20-26 30-10 30-6 30-10 20-15-5v-25l10-35 11-10 5-36-5-20-30-20h-31l-26-1-41 35-16 35-5 21 15 10 26 25-1 25v66l5 30-11 25-21 10h-15l-51 20-26 40-32 45-36 15-10 30-6 30 10 65-10 25-16 46-6 60 5 45 10 25 5 21 15 30v40l-26 40-11 20v56l-21 40-67 19-26-10 1-15-5-20 5-25v-25l-5-36-15-30-20-15-31 15-21 50-21 40-16 40-21 80-5 46-26 35-11 40-16 35-21 75-10 20-26 40-37 40-92 55-32 90-21 86-73 120-31 55 10 36 51 25 71 31 56 15 41 46 25 61-31 45-21 25-21 30-41 25-46 4-26-5-30-20-21-6h-30l-16 25-6 35-20 46-21 20-46-1-46-15-62 40-27 75-31 95-47 90-52 76-47 44-15 36 20 30 25 30 10 26-20 20-16 20-26 25-10 30-11 30-36-6-31-10-35 5-21 15-11 20-20 30-26 45-26 30-11 30-5 50 10 31 25 35 25 10 52 1 56 10 20 21 47 5 30-20 26 5 46 6 67-5 82-9v55l-1 40-26 50-36 15-25-5-5-20-10-30-16-31-41-10-30 5-47 14-46 15-21 40 10 31 25 50 21 35 20 51 4 40h-36l-41-5-40-6-31 5-16-10-25-30-36-36-30-45-51-41-25-30-10-16-47 5-41 20-56 30-21 20-37 95-10 20-21 45-37 70-10 20-21 35-52 81-32 80 5 70 46 16 67-30 61 11 5 25-21 45 36 15 46 1 31 20 15 30 36 26 41-10 92-45v71l-31 20-47 35-62 39-35-10-36-30-41 4-21 35-31 71-36 25-26-41-4-75 5-51-35-20-46-11-62-10-87-6-88 80-31 45-57 25-41 25-31 70-37 20-35-5-21 56-20-52v-35l21-30 20-20 21-15 78-70-4-151 46-15-25-20-31-10-57 15-15-16v-20l1-20-15-45 5-10h41l10-5 5-5-5-30 11-5 26-15 20-20 5-15 6-30 15-20 6-5 5-15-408-255-21-10h-5l-84 9-23-35-67-11-51-5-41-16-26 5-15 35-26 10-57-10-71-26-77-16-66-15-87-21-62-31-15 15v30l-42 5-46-5-26 35-20 10-15-46 21-65 26-45 42-85 15-35 46 45 36-40 26-5 87 87 51 20 41-30 51 11 42-35-16-31-46-20-46-15-61-21-25-76 16-55-31-5-36 15-57 55-30-6-10-35-15-56-20-35 36-20 56-45 63-70 16-60v-75l31-5 10 25 20 51-10 40 35 45 20 71h36l72 6 61 40 46 46 51 5 10-35-20-50-25-20-51-11v-55h57l46 1 25-10-25-26-20-35 20-20 62-35 77-14 57-5 5-40 31-15 62-20v-40l-51 5-57 14-128 55-93 29-72 35-26 40-31 40-10-25-20-46-5-45 26-35 31-15-36-35-61-16-41-56 6-35 21-20 5-30v-55l62 5 61 21 41 25 16-25-10-45-20-25-26-26 6-30 41-30 25 5 139 2 72-25 46 5 67 31 19 65 5 51 62 10 46 21 25-35-35-86 26-35 41 15 51 26 46 5 6-60 37-60 16-65-31 4-31 25-16 40-36 25-57-5-76-26-52 5-5-25 11-46-36-5-31 20h-30l-41-21-62 5-25-46 26-45 5-40-9-70 16-46 66-14 46 20 41 16 52-5 5-35-41-26-46-20-36-10-30-41v-35l31-25h52l36 1 15 30h41l10-25 6-30 36-45 15 30-6 45-15 46 15 25 36 5 31-50 36-15 21-45 16-50 25 10 46 81 66 21 62 15 9 46v45h36l26-50h46l37-35-16-30-71-26-46-20-46-26-77-50-66-61-35-31-77-10-47 19h-56l-46-5-26 45-21 60h-31l-4-81 15-35 31-35 68-70 36-85h46v40l20 61 52-20 5-50 16-45 31-20 36-5 26-30 16-40 30-10 16 25-1 46 20 45 16 10 30-10 26 16 30 40 36 31 41 15 31-25-10-25-25-36-46-35-26-25-40-56-10-35 26-20 46-45-10-36h-31l-45-30-122-122-57-6-41 10-72 10-20-21-5 11-6 45-21 40-26 5-30-36-5-45 6-40 15-30 42-30 51-45 37-25 36-60 26-10 41 20 25-15 6-30 15-20 21 5 15 16 36 20 26-15 20 15 20 6 31 5 5 20-16 25h-30l-47 10-31 30v15l31 30 15 35 30 21 16-10 21-50 36-35 26-10 26-5 5 20 4 40 5 36 15 25 15 35 5 31-10 40-11 40 20 25 26 5 15-20 21-20v-30l-4-55-5-40 41-10 41-5 26 5 5 25 5 36 15 25h36l15-15 6-35-5-45-15-36-20-60 10-40 26-5 20 35 46 51 35 51 31 25 41-25 6-50-30-46-16-30 21-5 41-5 11-45-10-50-20-31h-41l-42 20-61 25-36-6-5-40 11-40v-30l-15-31-10-40 26-5 15 25 15 31 25 20 46 21 21-46-45-80 11-56 20-10 41 16 36-10 5-25-20-15-46-1-56-25 15-25 21-10 5-25 16-46 41-9 5-30 21-46 21 16 5 25-1 50 10 15 31 26 15 40 4 71v50l15 10 31-30 6-60 21-25h25l31 15 46 11 62 15 31-30-21-25-61-46-41-35-20-61 47-40 21-10 56-29 57-20v-35l-25-16h-67l-72 24-57 25-62 25-25-25-10-36 32-105 31-30 6-76 36 11 20 20 46 15 56-4 21-20-41-21-51-35-46-31-5-20 16-25-31-15-71-11-32 55-46 5-61-11-10-35 46-15 36-19 31-46 51 11 62-20 32-60-11-10h-20l-67-1-51-20-77 29-83 65-35-60-41-51-61-1 4 51 26 45-16 5-26 35-82 25-113 14-61-15-47 4-20-45 16-40 98-20 51 1 31-35-56-41 57-50 25-10 63-55 78-150 56-5 5 30 25 41 67 15 82-39 52-80 42-35 82 31 46 20 71 11 82 5 67-50 37-90-4-55-20-61-31-50-40-91 21-20 15-20 26-16 25 1 21 9 15 5 16-10 4-11-14-28-15-20v-25l14-22 14-16 25-25 31-53z"/>
    </g>
</svg>

<div id="centerInfo"></div>
<script  src="./vasbdc.js"></script>

</body>
</html>

This is the JS file

    var vasbdcmap = document.getElementById("vasbdc-map"),
        centerInfo = document.getElementById("centerInfo"),
        allCenters = vasbdcmap.querySelectorAll("g");
        vasbdcmap.addEventListener("click", function(e){
            var center = e.target.parentNode;
            if(e.target.nodeName == "path") {
            for (var i=0; i < allCenters.length; i++) {
                allCenters[i].classList.remove("active");
            }
            center.classList.add("active");
            var centerName = center.querySelector("title").innerHTML,
            centerPara = center.querySelector("desc p");
            sourceImg = center.querySelector("img"),
            imgPath = "http://gator2007.temp.domains/~virgibdc/";
        //  imgPath = "";

            centerInfo.innerHTML = "";
            centerInfo.insertAdjacentHTML("afterbegin", "<img src="+imgPath + sourceImg.getAttribute('xlink:href')+" alt='"+sourceImg.getAttribute('alt')+"'><h1>"+centerName+"</h1><p>"+centerPara.innerHTML+"</p>");
            centerInfo.classList.add("show");

    
            }
        })

And this is the CSS file

    * {
  box-sizing: border-box;
}

body {
  background: #88a;
  color: #fff;
  font-family: Avenir, Calibri, sans-serif;
}

#vasbdc-map {
  fill: #174f17;
}

#vasbdc-map g {
  -webkit-transition: .3s;
  transition: .3s;
}

#vasbdc-map g:hover {
  fill: #2e9e2e;
  cursor: pointer;
}

.active, .active:hover {
  fill: #2e2e9e !important;
}

#centerInfo {
  position: absolute;
  top: 0;
  right: 0;
  width: 25%;
  background: rgba(0, 0, 0, 0.2);
  pointer-events: none;
  opacity: 0;
  -webkit-transition: 1s;
  transition: 1s;
}

@media all and (max-width: 800px) {
  #centerInfo {
    width: 40%;
  }
}
@media all and (max-width: 750px) {
  #centerInfo {
    width: 100%;
    position: static;
    background: none;
  }

  #centerInfo.show p {
    color: #000 !important;
    margin-bottom: 2rem;
  }
}
#centerInfo.show {
  opacity: 1;
}

#centerInfo h1 {
  background: #2e2e9e;
  padding: .3rem;
  padding-left: 1rem;
  margin-top: -.5rem;
  font-weight: 400;
}

#centerInfo p {
  margin-left: 2rem;
  margin-right: 2rem;
}

#centerInfo img {
  width: 100%;
}

question from:https://stackoverflow.com/questions/65879299/hyperlink-does-not-work-in-html-code-that-connected-with-js-code

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-06T19:21:31+0000

As s.kuznestov said, many of your tags are not closed, replace your HTML code like below-

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>CodePen - Interactive Geographical Map w/ SVG &amp; JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./vasbdc.css">

  </head>
  <body>
    <!-- partial:index.partial.html
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1900 822" id="vasbdc-map">-->
    <g id="City1" transform="translate(1615 46.592)">
      <title>New University Office - Central Region</title>
      <desc>
        <image xlink:href="1234.jpg" alt="LOGO"></image>
        <p>
          <br>Tel: 111.222.3333
          <br><a href="http://www.google.com/">www.123.com</a>
          <be>
          </be>
        </p>
      </desc>
    </g>
  </body>
</html>

Categories

javascript - Hyperlink does not work in HTML code that connected with JS code

javascript - Hyperlink does not work in HTML code that connected with JS code

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags