javascript - Button appearance not updating on class change -


when button clicked, background-color not become yellow intended nor clicked button's background-color revert red. goal change buttons' colors when clicked changing classes. when buttons' classes changed not change color. purpose of testfunction() updating color of buttons. purpose of testfunction2() adding onclick function buttons.

<!doctype html> <html>  <head>     <title>test</title> </head> <style>     .button {         background-color: red;     }      .c {         background-color: yellow;     } </style>  <body>     <table>         <tr>             <td>test1</td>         </tr>         <tr>             <td id="test1">                 <button class="c">0</button>                 <button class="">1</button>                 <button class="">2</button>                 <button class="">3</button>             </td>         </tr>         <tr>             <td>test2</td>         </tr>         <tr>             <td id="test2">                 <button class="c">0</button>                 <button>1</button>                 <button>2</button>                 <button>3</button>             </td>         </tr>     </table>      <script>         var lastclick1 = 0;         var lastclick2 = 0;         //alert('js');         function testfunction(c, n) {             //  alert('tf');             if (c == 0) {                 //  alert('s=0');                 if (lastclick1 != n) {                     var = document.getelementbyid("test1").children;                     a[lastclick1].class = '';                     a[n].class = 'c';                     alert('n: ' + n + ' class: ' + a[n].class);                     alert('lastclick:' + lastclick1 + ' class: ' + a[lastclick1].class);                     lastclick1 = n;                 }             } else {                 //  alert('else');                 if (lastclick2 != n) {                     var b = document.getelementbyid("test2").children;                     b[lastclick2].class = '';                     b[n].class = 'c';                     alert('n: ' + n + ' class: ' + b[n].class);                     alert('lastclick:' + lastclick2 + ' class: ' + b[lastclick2].class);                     lastclick2 = n;                 }             }         }          function testfunction2() {             //alert('tf2');             var t1 = document.getelementbyid("test1").children;             var t2 = document.getelementbyid("test2").children;             //alert(t1);             (var = 0; < 6; i++) {                 t1[i].onclick = function() {                     testfunction(0, parseint(this.innertext));                 };                 t2[i].onclick = function() {                     testfunction(1, parseint(this.innertext));                 };             }         }          testfunction2();     </script> </body>  </html> 

add jquery

link

css

.button {     background-color: red; }  .c {     background-color: yellow; } .r{     background-color: red; } 

jquery

$(function(){     $('button').on('click', function () {         $(this).parent('td').children('.c').removeclass('c').addclass('r');          $(this).addclass('c');     }) }); 

Comments

Popular posts from this blog

python - Operations inside variables -

Generic Map Parameter java -

arrays - What causes a java.lang.ArrayIndexOutOfBoundsException and how do I prevent it? -