<!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>

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