
[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になったときに、その盤面のボタンを変える方法も教えてください。


CC BY-SA 3.0
2017-05-18T06:13:06.660
34804
2017-05-24T08:12:06.813
2017-05-24T08:12:06.813
19110
23216
question
javascript html css
コードをどのように修正すべきかを教えてください。


単純には

[code]

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

これを

[code]

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

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


CC BY-SA 3.0
2017-05-22T05:36:30.507
34922
2017-05-22T05:36:30.507
5793
34804
answer