<!DOCTYPE html>
<html>
  <head>
    <link rel="icon" href="data:,">
    <style>
      body {
        width: 800px;
        margin: 0;
      }
      .box {
        width: 200px;
        height: 200px;
        float: left;
        margin: 100px;
      }
      #one {
        background: red;
      }
      #two {
        background: orange
      }
      #three {
        background: blue;
      }
      #four {
        background: green;
      }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var log = document.querySelector("#log")
        var boxes = document.querySelectorAll(".box")
        for (var i = 0; i < boxes.length; i++) {
          var el = boxes[i]
          el.onclick = function() {
            log.textContent = this.id
          }
        }
      }
    </script>
  </head>
  <body>
    <div id="one" class="box"></div>
    <div id="two" class="box"></div>
    <div id="three" class="box"></div>
    <div id="four" class="box"></div>
    <div id="log"></div>
    <svg id="svg" class="box"></svg>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <rect id="myrect" width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
    </svg>
  </body>
</html>
