SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Change button color with onclick function

    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.


    Code:
    <input type = "button" id = "alternative1" value="$alt1" onClick="changeQuestion('alternative1')">
    
    function changeQuestion(answer)
    	{
    document.getElementById(answer).style.backgroundColor = "#A9A9A9";
    	}
    Many thanks

  2. #2
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hy,
    I just tested your code and works fine. Maybe the problem is in other code.
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  3. #3
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


    Code:
    Code JavaScript:
     <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","ks_checkAnswer.php?answer="+answer,true);
    xmlhttp.send();
    }
    //]]>
     
    </script>

  4. #4
    SitePoint Addict
    Join Date
    Apr 2011
    Posts
    265
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I just tested this code on localhost and it worked fine.
    Code:
    <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();
    Free: Web Programming Courses HTML, CSS, Flash
    Web Programming: AJAX Course and PHP-MySQL Course video Lessons
    Good JavaScript and jQuery course for beginners

  5. #5
    SitePoint Member
    Join Date
    Jul 2011
    Posts
    23
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •