index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Path of DnD</title>
        <link rel="stylesheet" href="style.css">
    </head>

    <body>

        <object data="graph.svg" type="image/svg+xml" id="graph" width="900" height="900" ></object>
        <div class = "footer">
          <p>You have: <br><span id="counter"></span> Nodes</p>
        </div>

        <script type="text/javascript">
            var graph = document.getElementById("graph");

            var numNodes = 0;
            document.getElementById("counter").innerHTML = numNodes;

            graph.onload = function(){
              var svgDoc = graph.contentDocument;
              console.log(svgDoc);
              allNodes = svgDoc.querySelectorAll('g.node');
              console.log(allNodes);
              allNodes.forEach(function(node) {
                node.addEventListener("click", function() {
                  if(node.classList.contains("selected")){
                    numNodes--;
                    node.classList.remove("selected");
                  }else{
                    numNodes++;
                    node.classList.add("selected");
                  }
                  document.getElementById("counter").innerHTML = numNodes;
                });
              });
             }
        </script>
    </body>
</html>