change color onclick event in button

Question

I am facing a problem in my code. I want to change the color of the button when it is clicked. you can check my code which is given below.

<html>
    <head>
    </head>
    <body onload="func();">
        <br><br><div id="header"><h1 align="center">Online Aptitude-2k17</h1></div>
        <table align="center" width="100%">
            <tr id="t1">
                <td></td>
            </tr>
        </table>

        <script>
            function func() {
                for(var i=1;i<=30;i++) {
                    var x=document.getElementById("t1").innerHTML;
                    var p="<td><input type='button' value='"+i+"' onclick ='myFunction("+i+");'/></td>";
                    document.getElementById("t1").innerHTML=x+p;
                }
            }

            function myFunction(a,elem) {
                var xhttp = new XMLHttpRequest();
                xhttp.onreadystatechange = function() {
                    if (this.readyState == 4 && this.status == 200) { 
                        document.getElementById("ques").innerHTML = this.responseText;

                    }
                };
                xhttp.open("GET", "retrieveQuestion.php?question=" +a, true);
                xhttp.send();
            }
        </script>

        <div id="ques" style="text-align:center; padding:20px"></div>
        <table align="center" cellspacing="20px">
            <tr><td align="center"><input type="text" name="answer" /></td></tr>
            <tr><td align="center"><input type="button" value="Submit" /></td></tr>
        </table>
      </body>
</html>

Button which are contains 30 col in a single row what i want is when a user clicks on it it must be changed it's color when it is clicked.

Can anyone help me for this problem.

You can probably achieve this more easily with jQuery. In fact, you can just simply use jQuery's AJAX to keep things nice and neat. — user4616966
– user4616966, Commented Mar 4, 2017 at 3:29
Also, on your retrieveQuestion.php page, check to make sure that if you're pulling the questions and answers from a database, prevent SQL injection with HTML special characters, making sure it's set as a string, etc. — user4616966
– user4616966, Commented Mar 4, 2017 at 3:31
onclick ='this.style.backgroundColor=\"red\"; myFunction("+i+");' — nnnnnn
– nnnnnn, Commented Mar 4, 2017 at 3:37
I typed an essay with description in answer box but you are faster than me @nnnnnn — Sagar V
– Sagar V, Commented Mar 4, 2017 at 3:41

Byndd IT · Accepted Answer · 2017-03-04 06:10:39Z

2

make all color in array

$("button").click(function(){
    var color = clicked ? 'red' : 'blue';
    $(this).css('background-color', color);
    clicked = !clicked;
});

answered Mar 4, 2017 at 6:10

Byndd IT

2962 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

xxfast · Accepted Answer · 2017-03-04 03:52:24Z

0

Here's some example you can try implementing in your own code

function changeColor(e){
 e.style.backgroundColor = "red";
}

function populate() {
   for(var i=1;i<=30;i++) {
      var x=document.getElementById("holder").innerHTML;
      var p="<input style='background-color: #4CAF50' type='button' value='"+i+"'onclick='changeColor(this)'/>";
      document.getElementById("holder").innerHTML+=p;
   }
}

populate() ;

<div class="container">
<table id="holder"></table>
</div>

answered Mar 4, 2017 at 3:52

xxfast

7375 silver badges15 bronze badges

Collectives™ on Stack Overflow

change color onclick event in button

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related