estoy teniendo problemas con un pequeño juego que estoy haciendo para html, el caso es que necesito que la imagen de un botón cambie desde una función de Js llamada por el propio botón. No he puesto todo en todos los botones, si me pudierais corregir solo para el botón 1 me encargo yo de arreglar todos. El problema es que con eso que hay escrito no consigo cambiar la imagen. Dejo el código ya escrito: HTML:
var cuadro = new cuadro[10];
var turno = 0;
function btn1(){
if(turno == 0){
var image = document.getElementById('btn1');
image.src = "o.png";
}
}
function btn2(){
}
function btn3(){
}
function btn4(){
}
function btn5(){
}
function btn6(){
}
function btn7(){
}
function btn8(){
}
function btn9(){
}
body {
background:black;
}
#inicio div{
padding-left:40px;
padding-right: 40px;
}
#inicio ul{
position:relative;
text-align:center;
padding:20px;
}
#inicio li{
display:inline;
box-sizing:border-box;
padding-left:40px;
padding-right: 40px;
padding-top:10px;
padding-bottom:10px;
color:white;
font-size:50px;
background:-webkit-linear-gradient(left,black, rgba(255, 255, 0, 0.8) ,black);
}
#inicio a{
color :white;
text-decoration: none;
}
#juego {
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>KYG0H</title>
<link rel="stylesheet" href="tresenraya.css">
<script src="tresenraya.js"></script>
</head>
<body>
<div id="inicio">
<ul>
<li><a href="">Main</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/games">Games</a></li>
</ul>
</div>
<div id="juego">
<sup id="j1">Turno del Jugador 1!</sup>
<sup id="j2">Turno del Jugador 1!</sup>
<ul>
<button id="btn1" class="closing" onClick="javascript:btn1()"><img src="blanco.jpg" id="img1"/></button>
<button id="btn2" class="closing" onClick="javascript:btn2()"><img src="blanco.jpg" id="img2"/></button>
<button id="btn3" class="closing" onClick="javascript:btn3()"><img src="blanco.jpg" id="img3"/></button>
</ul>
<ul>
<button id="btn4" class="closing" onClick="javascript:btn4()"><img src="blanco.jpg" id="img4"/></button>
<button id="btn5" class="closing" onClick="javascript:btn5()"><img src="blanco.jpg" id="img5"/></button>
<button id="btn6" class="closing" onClick="javascript:btn6()"><img src="blanco.jpg" id="img6"/></button>
</ul>
<ul>
<button id="btn7" class="closing" onClick="javascript:btn7()"><img src="blanco.jpg" id="img7"/></button>
<button id="btn8" class="closing" onClick="javascript:btn8()"><img src="blanco.jpg" id="img8"/></button>
<button id="btn9" class="closing" onClick="javascript:btn9()"><img src="blanco.jpg" id="img9"/></button>
</ul>
</div>
</body>
</html>
Muchas gracias.