-3

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

2
  • 3
    ソースコードはスクリーンショットではなく、テキストとして貼り付けるとよいです。 その際、投稿に含まれるソースコードや、整形済みのテキストは選択した上で {} ボタンをクリックして整形済みブロックにして下さい。インデントが保持され、< などの文字もそのまま使えるようになります。
    – mjy
    2017年5月18日 6:34
  • 4
    Stack Overflowはコードを書く人のためのQ&Aサイトですが、この投稿では質問の体をしたコーディング依頼にしか見えません。尋ねたい内容を絞り込んでください。
    – sayuri
    2017年5月19日 2:11

1 件の回答 1

2

単純には

document.getElementById("c" + x + y).innerHTML="...";

これを

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

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

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。