Change button color with onclick function

JavaScript
1

I want to change the color of a button when it is clicked and have added this getElementById line in the function called by onclick but when I add the line the function won’t run. Any ideas what might be wrong with it? The function also contains AJAX to change the button content but everything else is working fine as long as I don’t add this line.

<input type = "button" id = "alternative1" value="$alt1" onClick="changeQuestion('alternative1')">

function changeQuestion(answer)
	{
document.getElementById(answer).style.backgroundColor = "#A9A9A9";
	}

Many thanks

2

Hy,
I just tested your code and works fine. Maybe the problem is in other code.

3

Yes I’m probably making some silly mistake as I’m new at this. This is the whole function. As long as I don’t use the backgroundColor line it’s fine. If I do, “qa” is not updated. The first time this function is called answer is not a valid object.


```javascript
 &lt;script type = "text/javascript"&gt;
//&lt;![CDATA[
var pending = false;
function changeQuestion(answer)
{
    // test to see if something else set the state to pending.
	// if so... return, we don't want this to happen.
	if(pending) return;
	pending = true; // raise the flag!
document.getElementById(answer).style.backgroundColor = "#A9A9A9";
 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){
    document.getElementById("qa").innerHTML=xmlhttp.responseText;
	pending = false;
    }

  }
xmlhttp.open("GET","ks_checkAnswer.php?answer="+answer,true);
xmlhttp.send();
}
//]]&gt;

&lt;/script&gt;
4

I just tested this code on localhost and it worked fine.


<input type = "button" id = "alternative1" value="$alt1" onClick="changeQuestion('alternative1')">
<div id="qa">For Response</div>
<script type = "text/javascript">
//<![CDATA[
var pending = false;
function changeQuestion(answer){
  // test to see if something else set the state to pending.
  // if so... return, we don't want this to happen.
  if(pending) return;
  pending = true; // raise the flag!
  document.getElementById(answer).style.backgroundColor = "#A9A9A9";

  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){
      document.getElementById("qa").innerHTML=xmlhttp.responseText;
      pending = false;
    }  
  }
  xmlhttp.open("GET","test.php?answer="+answer,true);
  xmlhttp.send();
}
//]]>
</script>

If for you still not work, try move the line with the code for backgroundColor after the xmlhttp.send();

5

Thank you very much for your help. Nothing seemed to get this line working in my case so I solved it by putting this line in a separate function and then call both functions every time. That works fine.