2

Hola estoy empezando en javascript y html y estoy haciendo un Tic tac toe. Tengo el problema de que cuando trato de que muestre el X o el O en el botón y se desactive no me muestra nada acá el código, comenten errores:

    <html>
<head>
	<style>
	input[type = "button"]{
		width: 100px;
		height:100px;
		color:#349913;
		border-color:#12200D; 

	}
	</style>

</head>
<body>
	<input type="button"  name="boton1" id="boton1" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton2" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton3" value="" onclick="tateti(this.id);"><br>
	<input type="button"  name="boton1" id="boton4" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton5" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton6" value="" onclick="tateti(this.id);"><br>
	<input type="button"  name="boton1" id="boton7" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton8" value="" onclick="tateti(this.id);">
    <input type="button"  name="boton1" id="boton9" value="" onclick="tateti(this.id);">
<script>

	function tateti(clicked){
       var bandera=true;
        boton1=document.getElementById(clicked);
   
       }
		if(bandera==true){
			boton1.value="x";
			boton1.disabled=true;
			bandera="1";
            
            }
       else{
        	boton1.value="o";
        	boton1.disabled=true;
        	bandera=true
        	

        	}
        
		}
</script>

</body>
</html> 

1
  • Hola, mira bien tu funcipon, tienes un } de más, ¿es eso a lo que te refieres?
    – César
    Commented el 6 jun. 2017 a las 21:40

3 respuestas 3

3

Tenías varios errores. Me tomé la libertad de corregirlos y mejorar un poco el código

  1. Tenías un } de más.
  2. La variable bandera debe estar fuera del cuerpo de la función, de lo contrario siempre estarás reiniciandola en true y por lo tanto siempre será el turno de ´X´
  3. Al finalizar la ejecución del if deberías asignar bandera a false no a 1
  4. Para que no se muevan los botones al hacer clic puedes colocar un espacio en blanco " " como value de los botones
  5. (Opcional) No necesitas los id en los botones si le pasas this es decir el mismo botón directamente a la función
  6. (Opcional) En el if no es necesario compararlo contra true ya que al evaluar la variable ya retorna el valor boolean esperado
  7. (Opcional) Ya que el botón siempre se desactiva y la bandera siempre se cambia, puedes mover esas dos instrucciones fuera del if
  8. (Opcional) Ahora que el if es realmente simple, puedes simplificarlo mas usando el operador ?:
  9. (Opcional) En lugar de tener una variable global bandera lo cual puede que no sea una buena práctica, puedes almacenarla como propiedad de la misma función tateti

function tateti(boton) {
    boton.value = tateti.bandera ? "x" : "o"; 
    boton.disabled = true;
    tateti.bandera = !tateti.bandera;
}

tateti.bandera = true;
input[type="button"] {
    width: 100px;
    height: 100px;
    color: #349913;
    border-color: #12200D;
}
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)"><br>
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)"><br>
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)">

  1. (Opcional) Con respecto al punto 9. Aún tiene un problema. La variable bandera (o tateti.bandera) aún es posible modificarlo desde afuera de la función. Se puede solucionar si se captura la variable mediante un IIFE (Immediately-invoked function expression) encapsulándola de forma que no sea accesible desde afuera de la función

var tateti = (function() {
    var bandera = true;
    
    return function(boton) {
        boton.value = bandera ? "x" : "o"; 
        boton.disabled = true;
        bandera = !bandera;
    }
})();
input[type="button"] {
    width: 100px;
    height: 100px;
    color: #349913;
    border-color: #12200D;
}
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)"><br>
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)"><br>
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)">
<input type="button" name="boton1" value=" " onclick="tateti(this)">

1

Varias correcciones se tuvo que hacer a tu código:

  • Primero la llave } extra que tenías
  • Corregir el asignar el valor a tu variable bandera, si le asignas "1" este siempre será true puedes probarlo haciendo un console.log("1" == true), se le debe asignar un valor de tipo false para que entre a tu else
  • Dejar afuera de tu función la variable bandera de lo contrario siempre se inicializará en true y no se le asignará otro valor cuando mandes llamar a tu función.

var bandera=true;

function tateti(clicked){
	console.log(bandera)
  boton1=document.getElementById(clicked);
  if(bandera==true){
    boton1.value="x";
    boton1.disabled=true;
    bandera=false;

  }
  else{
    boton1.value="o";
    boton1.disabled=true;
    bandera=true;
  }
}
<input type="button"  name="boton1" id="boton1" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton2" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton3" value="" onclick="tateti(this.id);"><br>
	<input type="button"  name="boton1" id="boton4" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton5" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton6" value="" onclick="tateti(this.id);"><br>
	<input type="button"  name="boton1" id="boton7" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton8" value="" onclick="tateti(this.id);">
    <input type="button"  name="boton1" id="boton9" value="" onclick="tateti(this.id);">

-1

Hola amigo solo tienes "}" despues del else como comento @César aqui tienes el codigo corregido :

 <html>
<head>
	<style>
	input[type = "button"]{
		width: 100px;
		height:100px;
		color:#349913;
		border-color:#12200D; 

	}
	</style>

</head>
<body>
	<input type="button"  name="boton1" id="boton1" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton2" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton3" value="" onclick="tateti(this.id);"><br>
	<input type="button"  name="boton1" id="boton4" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton5" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton6" value="" onclick="tateti(this.id);"><br>
	<input type="button"  name="boton1" id="boton7" value="" onclick="tateti(this.id);">
	<input type="button"  name="boton1" id="boton8" value="" onclick="tateti(this.id);">
    <input type="button"  name="boton1" id="boton9" value="" onclick="tateti(this.id);">
<script>

	function tateti(clicked){
       var bandera=true;
        boton1=document.getElementById(clicked);
   
       }
		if(bandera==true){
			boton1.value="x";
			boton1.disabled=true;
			bandera="1";
            
            }
       else{
        	boton1.value="o";
        	boton1.disabled=true;
        	bandera=true
        	

        	}
        
		
</script>

</body>
</html> 

3
  • +1 porque el voto negativo ha sido injustificado. Commented el 6 jun. 2017 a las 22:15
  • @MáximaAlekz Este código no funciona, trata de ejecutarlo tu misma. Aparece el mensaje Uncaught ReferenceError: bandera is not defined Commented el 6 jun. 2017 a las 22:19
  • @CarlosMuñoz ahora sí, está justificado :) Aunque de igual modo, está bloqueado el voto. Commented el 6 jun. 2017 a las 22:20

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.