コードをどのように修正すべきかを教えてください。

[code]

    <!DOCTYPE html>
    <html lang="ja">
    <head>
        <meta charset = "UTF-8" />
        <title>tekisutogataRPG</title>
    
    <style>
    .cell{width:80px;
        height:80px;
        background-color:skyblue;
        font-size:40pt;
        margin:0 auto;}
    </style>
    
    <script>
    var counter;
    function makeBoard(){
        var i,j;
        var cells="";
        counter = 0;
        for(i=0; i<3; i=i+1){
            for(j=0; j<3; j=j+1){
                cells = cells + "<button class='cell' id='c"+i+j+"' onClick='counter=counter+1; changeCell("+i+","+j+");'>◯</button>";
    
            }
            cells=cells+"<br>";
        }
        document.getElementById("board").innerHTML=cells;
        document.getElementById("count").innerHTML="手数："+ counter;
    }
    function changeCell(x,y){
        if(counter == 9){document.getElementById("c" + x + y).innerHTML="right";}
        else{document.getElementById("c"+x+y).innerHTML="wrong";}
        document.getElementById("count").innerHTML="手数："+ counter;
    }
    </script>
    
    </head>
    
    <body>
    <div id="board"></div>
    <script>
    makeBoard();
    </script>
    <button onClick="makeBoard();">riset</button>
    <div id="count"></div>
    </body>
    </html>
[/code]

盤面を押したときにその盤面が画像に切り替わる方法を教えてください。  
また、counterが9になったときに、その盤面のボタンを変える方法も教えてください。




単純には

[code]

    document.getElementById("c" + x + y).innerHTML="...";
    
[/code]

これを

[code]

    document.getElementById("c" + x + y).innerHTML='<img src="画像のurl" />';
    
[/code]

とすれば`img`要素が挿入されます。詳しくはDOM操作というキーワードで勉強してみれば良いと思います。

