index.html

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css" media="screen" charset="utf-8">
  </head>
  <body>
    <div id="TEI">
      Sadly, this page will not work in Internet Explorer and some older browsers. We suggest you use a newer version of Chrome or Firefox.
    </div>
    <script src="CETEI.js"></script>
    <script>
      var c = new CETEI();
      let behaviors = {
        "tei": {
            // create mouseover effect with console log of implication
            "del": function(elt) {
            elt.addEventListener('mouseover', function handleHover(event) {
              result = elt.hasAttribute("implication");
              if (result) {
                console.log('element moused-over with: '+ elt.getAttribute("implication"));
              }
              });
            elt.setAttribute("class", "test");
            }
        }
      }
      c.addBehaviors(behaviors);
      c.getHTML5('tei.xml', function(data) {
        document.getElementById("TEI").innerHTML = "";
        document.getElementById("TEI").appendChild(data);
      });
    </script>
    end of button script
  </body>
</html>