<!DOCTYPE html>
<html lang="ja">
<head>
<metacharset="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(){
vari,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 = "Workaround:"+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 = "Workaround:"+counter;
}
</script>
</head>
<body>
<divid="board"></div>
<script>
makeBoard();
</script>
<button onClick="makeBoard();">riset</button>
<divid="count"></div>
</body>
</html>Please tell me how to change the board surface to an image when you press the board surface.
Also, please tell me how to change the button on the board when the counter reaches 9.
Simply
document.getElementById("c"+x+y).innerHTML="...";
This is
document.getElementById("c"+x+y).innerHTML='<img src="url of image"/>";
inserts the img element.For more information, I think you should study using the keyword DOM operation.
© 2024 OneMinuteCode. All rights reserved.