title: Show floated div near a button
body: <p>I am trying to show a floated div near a button when I click it, and hide the div when I hit a "Close" span within it. This is my code:</p>
  
  <pre><code>    &lt;style&gt;
      #noteDiv {display:none; position: absolute;}
      &lt;/style&gt; 
  
      &lt;script&gt;
      function showNote(e) {
  
        var x = 0, y = 0;
        if (!e) e = window.event;
        if (e.pageX || e.pageY) {
          x = e.pageX;
          y = e.pageY;
        }
        else if (e.clientX || e.clientY) {
          x = e.clientX + document.body.scrollLeft
            + document.documentElement.scrollLeft;
          y = e.clientY + document.body.scrollTop
            + document.documentElement.scrollTop;
        }
      var noteDiv = document.getElementById("noteDiv");
        noteDiv.style.display = "block";
        noteDiv.style.left = (x+20)+"px";
        noteDiv.style.top = (y)+"px";
      }
  
      function hideNote() {
        document.getElementById("noteDiv").style.display = "none";
      }
      &lt;/script&gt;
  
   &lt;div id='noteDiv'&gt;
   &lt;div style="margin: 5px; float: right; font-size: smaller"&gt;&lt;span  onclick="hideNote()"&gt;Close&lt;/span&gt;&lt;/div&gt;&lt;br clear="all"&gt;
  
  &lt;div&gt;Note Content&lt;/div&gt;
   &lt;/div&gt;
  
      &lt;?php
      echo "&lt;button type ='button' onClick = 'showNote();'&gt;Note&lt;/button&gt;";
      ?&gt;
  </code></pre>
  
  <p>It does hide the div, but when I click the button "Note", the noteDiv does not show up. </p>
  
  <p>What is going wrong?</p>
  
  <p>Thank you!  Michael Laszlo. I Think I found the problem though I don't know how to deal with it.</p>
  
  <p>I believe it is the javascript peice since if I comment out this part:</p>
  
  <pre><code>if (e.pageX || e.pageY) {
    x = e.pageX;
    y = e.pageY;
   }
    else if (e.clientX || e.clientY) {
    x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
    y = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
    }
  </code></pre>
  
  <p>The button works well (although the position is at the left corner of the screen since the x and y are 0). </p>
  
  <p>Did I miss anything?</p>
  
  <p>For Sunil's suggestion,I removed the class part for now, and I changed the onClick to onclick, and the echo is good now, Thank you Sunil!</p>
  
  <p>Thank you Michael Laszlo, again! Yes you are right! I need to give the button an ID or the e could not be passed to the function! Now my code works, too!</p>
  
  <p>I have a lot of such buttons on my page, and I need to generate a var to verify them and then I think it should work. If any problems, it should be another question, haha, about php.</p>
  
  <p>Thank you so much Michael Laszlo and Sunil, your suggestions of setting ids to the button and checking the code from browser are great help! I learned valuable things from you guys!</p>