سلام دوستان
میخواستم مشکل این کد چیه که اجرا نمیشه...دو تا سلول داریم یکی قرمز و دیگری آبی.کدی که نوشته با اجرای آن وقتی که هر بار روی دکمه کلیک میکنیم باید رنگ سلول ها عوض شه...اگه میشه بگید مشکل کد کجاست و چطوری میشه درستش کرد......در ضمن اگر نرم افزاری میشناسید که کد های جاوا اسکریپت رو مرحله به مرحله اجرا کنه و نشون بده تا بشه مشکل رو پیدا کرد اگه یه همچین برنامه ای میشناسین بگید دمتون گرم

کد HTML:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>XO</title>
    <style>
        table {
            border-collapse:collapse;
        }

        td {
            text-align:center;
            height:20px;
            width:40px;
            border:1px solid black;
                  }
        #td1 {
            background-color:red;
        }
        #td2 {
            background-color:blue;
        }

    </style>
    
<script>

    
    function show() {
        var a = 1;
        if (a == 2) {
            var td1 = document.getElementById('td1');
            td1.style.backgroundColor = "blue";
            var td2 = document.getElementById('td2');
            td2.style.backgroundColor = "red";
            a = 2;
        };
        
        if (a == 2) {
            var td1 = document.getElementById('td1');
            td1.style.backgroundColor = "red";
            var td2 = document.getElementById('td2');
            td2.style.backgroundColor = "blue";
            a = 1;
        };


    }
    
    
</script>
</head>
<body>

    <h1 id="hd">Test</h1>
    <table id="tab">
        <tr>
            <td id="td1"> 1 </td><td id="td2"> 2 </td>
        </tr>

    </table>

    <input type="button" value="Click" id="b1" onclick="show();" />


</body>
</html>