<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hour 9-1</title>
    <link rel="stylesheet" type="text/css" href="css/css3.css">
    <script type="text/javascript" src="js/js3.js"></script>
</head>

<body onload="onloadHandler()">

  <div id="div1">Say Yes</div>
  <div id="div2">Say No</div>
  <div id="heading"></div>

</body>
</html>
div{
    border-radius: 5px;
    margin: 3px;
    padding:5px;
    background-color: lightgray;
    font-weight: bold;
    display: inline-block;
    cursor: pointer;
}

function clickHandler(e,objId,num,msg) {
    var obj=document.getElementById(objId);
    obj.innerHTML="DIV"+num+" says "+msg+" at X position: "+e.screenX;
}
function yesWrapper(e) {
    clickHandler(e,"heading",1,"yes");
    e.target.removeEventListener('click',yesWrapper)
}
function noWrapper(e) {
    clickHandler(e,"heading",2,"no");
    e.target.removeEventListener('click',noWrapper)
}
function  onloadHandler() {
    document.getElementById("div1").addEventListener('click',yesWrapper,false);
    document.getElementById("div2").addEventListener('click',noWrapper,false);
}