Estou fazendo uma clássico jogo da velha em HTML,CSS E JavaScript, porém, quero saber qual comando eu posso usar para poder trocar a imagem de um botão em javascript
Sei que tem alguma coisa a ver com document.getElementById()
<!DOCTYPE html>
<html>
<head>
<title>TicTacToe</title>
<meta charset="utf-8">
<style type="text/css">
body{
background: #eff2ef;
}
#principal{
}
#principal td tr{
background: white;
margin: 20px;
border: solid;
border-color: black;
padding: 30px;
}
#principal td tr label{
background: white;
}
</style>
<script type="text/javascript">
var fotos = ["images/fundoCinza.jpeg" ," images/fundoX.jpeg " , "images/fundoO.jpeg"];
</script>
</head>
<body>
<div id="tabela" align="center">
<table id="principal">
<tr>
<td>
<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
</td>
<td>
<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
</td>
<td>
<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
</td>
</tr>
<tr>
<td>
<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
</td>
<td>
<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
</td>
<td>
<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
</td>
</tr>
<tr>
<td>
<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
</td>
<td>
<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
</td>
<td>
<button><img src="images/fundoCinza.jpg" width="100" height="100"></button>
</td>
</tr>
</div>
</table>
</body>
</html>
Quero que quando eu clique sobre algum desses botões, ele mude pra uma segunda imagem(que no caso vai ser esse fundo cinza com um X na frente