Trying to get a javascript function in a php foreach loop to work -

i had question answered regarding creating 2 pop boxes using simple javascript. have attached demo of answer below. novice php developer has started learn js. question this..

the code below forum. 'ask question' creates pop question can asked - part of code fine. questions pulled database using simple php foreach loop , each question, need 'edit' button each question creates pop 'edit question'. demo below works editing 1 question (the first) doesn't subsequent questions. know simple thing, relating how function called etc despite finding 'solutions' online can't work. accustomed being able call function in php anytime want , many times want. isn't case js written here. give me advice?

html

<button id="askquestion">ask question</button> <button id="editquestion">edit question</button>  <div id="overlay"></div>  <div id="popup"> <h2>question?</h2> <button id="closebtn">close</button> </div>  <div id="popupedit"> <h2>edit question</h2> <button id="closeeditbtn">close</button> </div>  

css

#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); display: none; }  #popup, #popupedit { position: absolute; top: 50%; left: 50%; margin: -150px 0 0 -200px; width: 400px; height: 300px; display: none; background: #eee; } 

javascript

     window.onload = function () {      document.getelementbyid("askquestion").onclick = function () {      var overlay = document.getelementbyid("overlay");      var popup = document.getelementbyid("popup");      overlay.style.display = "block";      popup.style.display = "block";      };       document.getelementbyid("closebtn").onclick = function () {      var overlay = document.getelementbyid("overlay");      var popup = document.getelementbyid("popup");      overlay.style.display = "none";      popup.style.display = "none";      };       document.getelementbyid("editquestion").onclick = function () {      var overlay = document.getelementbyid("overlay");      var popupedit = document.getelementbyid("popupedit");      overlay.style.display = "block";      popupedit.style.display = "block";      };       document.getelementbyid("closeeditbtn").onclick = function () {      var overlay = document.getelementbyid("overlay");      var popupedit = document.getelementbyid("popupedit");      overlay.style.display = "none";      popupedit.style.display = "none";    };   }; 

i hope clear....and appreciate help. these days seem turning stackoverflow everyday.....eek

demo http://jsfiddle.net/nrfc2/

---

i have tried this.....

js

  window.onload = function () {  document.getelementbyid("askquestion").onclick = function () {      var overlay = document.getelementbyid("overlay");      var popup = document.getelementbyid("popup");      overlay.style.display = "block";      popup.style.display = "block";    };   document.getelementbyid("closebtn").onclick = function () {      var overlay = document.getelementbyid("overlay");      var popup = document.getelementbyid("popup");      overlay.style.display = "none";      popup.style.display = "none";  };   document.getelementsbyclassname("editquestion").onclick = function () {      var overlay = document.getelementsbyclassname("overlay");      var popupedit = document.getelementsbyclassname("popupedit");      overlay.style.display = "block";      popupedit.style.display = "block";  };   document.getelementsbyclassname("closeeditbtn").onclick = function () {      var overlay = document.getelementsbyclassname("overlay");      var popupedit = document.getelementsbyclassname("popupedit");      overlay.style.display = "none";      popupedit.style.display = "none";  };  }; 

css

 #overlay {  display:none;      position:fixed;    left:0px;          top:0px;           width:100%;        height:100%;       background:#000;   opacity:0.5;       z-index:99999;      }   .overlay {  display:none;      position:fixed;    left:0px;          top:0px;           width:100%;        height:100%;       background:#000;   opacity:0.5;       z-index:99999;      }    #popup {   display:none;   position:fixed;   left:40%;           top:30%;            width:600px;        height:150px;   margin-top:-75px;   margin-left:-150px;   background:#ffffff;   border:1px solid #000;   z-index:100000;         }    .popupedit {   display:none;   position:fixed;   left:40%;           top:30%;            width:600px;        height:150px;   margin-top:-75px;   margin-left:-150px;   background:#ffffff;   border:1px solid #000;   z-index:100000;         }   button#askquestion{ padding: 0; border: none; background: none; color:#a8a8a8; font-weight: bold;   }   button#closebtn { padding: 0; border: none; background: none; position:absolute; right:10px; top:5px;   }    button.editquestion{ padding: 0; border: none; background: none; color:#a8a8a8; font-weight: bold;  }   button.closeeditbtn { padding: 0; border: none; background: none; position:absolute; right:10px; top:5px;   } 

html ask question edit question

   <div id="overlay"></div>     <div id="popup">    <h2>question?</h2>    <button id="closebtn">close</button>    </div>     <div class="popupedit">    <h2>edit question</h2>    <button class="closeeditbtn">close</button>    </div> 

still no luck.......any takers...?

if want able edit each question (update in database), you'll need question's id database.

i this:

<button id="editquestion" onclick="editquestion(2);">edit question</button> 

in onclick action, pass id (2 in case) argument. in editquestion() function show popup , include id in edit form in hidden field.

<script> function editquestion(questionid){    var overlay = document.getelementbyid("overlay");    var popupedit = document.getelementbyid("popupedit");    //in edit form, create hidden field , put var questionid in value    overlay.style.display = "block";    popupedit.style.display = "block"; } </script>