Question

I want to set up an image button (OPEN) with an onclick() function that renders a message including specific value changes in php.
The desired behaviour when user clicks on that button, is that it will be replaced with another image button (CLOSE).

Is it possible to set a variable button ?
I have attempted to use variable link as follows:

JavaScript:

if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
   }
 else
 {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange=function()
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   var response=xmlhttp.responseText;
   x=response;
   if(x == 1)
   link="OPEN";
   else 
   link="CLOSE";

   var content = "<table style=\"padding-left:10px ;  float:right ; text-align:right\" > <tr><td style=\"float:right;color: blue;text-decoration: underline\" onmouseover=\"this.style.cursor='hand'\" onclick=\"function()\">"+link+"</td></tr></table>";

But, when user click on the ‘OPEN’ link and closes the page, next time he will get the CLOSE link instead of OPEN

Any suggestions on how to implement this correctly?

Answer 1

something like this

if(x == 1) {
  link="OPEN";
  src="open.png"
} else {
  link="CLOSE";
  src="close.png"
}

var content = "<table style=\"padding-left:10px ;  float:right ; text-align:right\" > <tr><td style=\"float:right;color: blue;text-decoration: underline\" onmouseover=\"this.style.cursor='hand'\" onclick=\"function()\"><img src=\""+src+"\"/>"+link+"</td></tr></table>";

or use with an image somewhere

document.getElementById("imageid").src=src