I'm making a classic old game in HTML, CSS and JavaScript, however, I want to know which command I can use to be able to swap the image of a button in javascript
I know it has something to do with 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>
I want when I click on any of these buttons, it changes to a second image (which in this case will be this gray background with an X in the front