ClassMember

by nhoughto5

HTML

<body>
<h2>Click the image, should result in a '10' appearing below the image</h2>
<div id="headTray"></div>
</body>
<script>
  class testClass{
    constructor(){
      this.param = 10;
    }

    populateImage(){
      var div = document.getElementById("headTray");
      var img = document.createElement("img");
      img.setAttribute("width", "304");
      img.setAttribute("height", "228");
      img.setAttribute("onclick", "testCallback()");
      img.src = "https://i.imgur.com/mOGA4pc.jpg"
      div.appendChild(img);
    }
  }

  var instance;
  function testCallback(){
    var div = document.getElementById("headTray");
    var p = document.createElement('p');
    p.innerHTML = instance.param;
    div.appendChild(p);
  }

  window.onload = function(){
    instance = new testClass();
    instance.populateImage();
  }
</script>