0

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.

1
  • Si añades un ejemplo visual del botón con sus estados, nos ayudará a darte una solución. No llego a entender por qué querrías hacer ese cambio de imagen. En principio lo que veo es que duplicas la función, cuando seguramente bastaría con una parametrizada. Además tienes un error en el js que deberías corregir a menos que sea lo que no sabes cómo resolver. Por otro lado si quieres hacer un botón de imágenes has de usar <input type="image" src="blanco.jpg">, es semáticamente más correcto. P.f. pon el diseño para que podamos ayudarte mejor. Commented el 11 feb. 2019 a las 14:39

1 respuesta 1

0

Esta es mi solución, pero la verdad, me habría gustado saber más. Es posible que mi respuesta no sea lo que necesites porque faltan detalles de tu pregunta. Si esto no es lo que necesites espero que al menos te ayudará a formular una pregunta mejor.

var turno = false;

function btn(b){
  var image = b.querySelector('img');
  turno = !turno;
  if(turno){
   image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat";
}
    else{
  image.src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat";
  }
  }
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;
   }
<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>
            <li><button id="btn1" class="closing" onclick="btn(this)" ><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat" id="img1"/></button></li>
		    </ul>
		
    </div>

2
  • Muchas gracias, resuelve mi duda Commented el 10 feb. 2019 a las 17:05
  • Si resolvió tu pregunta marca la respuesta como aprobatoria. Commented el 11 feb. 2019 a las 16:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.