Como obtener información del botón indicado.

10351

durante este curso recibirás el reto de hacer tu propio piedra papel o tijeras, y aunque es un reto muy fácil de hacer y no hay mucho problema en crear el código principal, tal vez te enredes un poco al agregarles detalles (como me paso a mi).

				<button value="1" id="piedra_id"> piedra </button>
        <button value="2" id="papel_id">papel</button>
        <button value="3" id="tijeras_id">tijeras</button>

var piedra = document.getElementById("piedra_id").addEventListener("click", selection1);
var papel = document.getElementById("papel_id").addEventListener("click", selection2);
var tijeras = document.getElementById("tijeras_id").addEventListener("click", selection3);

esto fue lo que se me ocurrió por primera vez, cada botón esta conectado con una función diferente y aunque no es la mejor opción es bastante funcional. Pero hay una mejor manera de realizar este proceso.

				<button value="1" id="piedra_id"class="boton">piedra</button>
        <button value="2" id="papel_id"class="boton">papel</button>
        <button value="3" id="tijeras_id"class="boton">tijeras</button>
				//Todos deben de tener la misma clase.

como pueden observar estos botones ademas de su id tienen una clase, esto lo usaremos para que todos los botones estén dentro de un array en javaScrips de la siguiente manera.(no borres los id, te servirán más adelante)

var botones = document.getElementsByClassName("boton"); // los botones se ordenaran según como estén ordenados en el HTML,

ok, ahora debemos de identificar que botón se presione de la siguiente manera.

for(var i = 0; i < botones.length; i++) // la palabra_length devuelve el numero de elemento que se encuentra dentro el la matriz.
{
    botones[i].addEventListener("click", selection, false)
}

y finalmente vamos a la función seleccionar donde usaremos el id de cada botón para elaborar que queremos según que casos.

function selection()
{
   switch(this.id) //usamos this.id para referirnos a la id de el botón pulsado 
   {
    case"piedra_id":
        user = 1;
        console.log(user);
        play();break;case"papel_id":
        user = 2;
        console.log(user);
        play();break;case"tijeras_id" :
        user = 3;
        console.log(user);
        play();break;

   }
}