Show floated div near a button

Question

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:

    <style>
    #noteDiv {display:none; position: absolute;}
    </style> 

    <script>
    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";
    }
    </script>

 <div id='noteDiv'>
 <div style="margin: 5px; float: right; font-size: smaller"><span  onclick="hideNote()">Close</span></div><br clear="all">

<div>Note Content</div>
 </div>

    <?php
    echo "<button type ='button' onClick = 'showNote();'>Note</button>";
    ?>

It does hide the div, but when I click the button "Note", the noteDiv does not show up.

What is going wrong?

Thank you! Michael Laszlo. I Think I found the problem though I don't know how to deal with it.

I believe it is the javascript peice since if I comment out this part:

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;
  }

The button works well (although the position is at the left corner of the screen since the x and y are 0).

Did I miss anything?

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!

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!

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.

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!

Answer 1

The problem is that the event e is undefined when showNote() gets called. To ensure that an event is passed to showNote, give the button an ID and attach the click handler when the window loads.

For example, you can define the button like this:

<button id="noteButton" type="button">Note</button>

Then add this to your JavaScript:

window.onload = function () {
  document.getElementById('noteButton').onclick = showNote;
};

This approach is demonstrated in the following snippet.

window.onload = function () {
  document.getElementById('noteButton').onclick = showNote;
};

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";
}

#noteDiv {
  display:none;
  position: absolute;
}

<div id='noteDiv'>
  <div style="margin: 5px; float: right; font-size: smaller">
    <span onclick="hideNote()">Close</span>
  </div>
  <br clear="all">
  <div>Note Content</div>
</div>

<button id="noteButton" type="button">Note</button>

Answer 2

It should work, but keep in mind that you need to click a specific area on screen and not just anywhere to close the note. You could make this area obvious to user by styling the span with a border.

You can see a demo to show that it works here: https://jsfiddle.net/g43j5jdp/1/

I added a border to the close area as in code below.

<div style="margin: 5px; float: right; font-size: smaller;
border:1px solid red;"><span onclick="hideNote()">Close</span>

NOTE The quickest solution to your problem would be to use the browser's developer tool. Else you might end up spending too much time on this.

Also please read this stackoverflow post, which might help you to get rid of php code $classStr showing in rendered html: Why is my PHP source code showing? Your problem seems to be with php configuration.