JQuery - Llamas a una funcion con un checkbox

 
Vista:
sin imagen de perfil

Llamas a una funcion con un checkbox

Publicado por Juan Manuel (3 intervenciones) el 01/05/2017 22:45:43
Buenas tardes o buenas noches o buen dia, dependiendo de donde vivan.

Estoy haciendo un juego de piedra papel o tijera javascript, y necesito saber como llamar a una funcion con un chexbox, este chexbox tendra la funcion de cambiar la dificultad de el juego. Aqui les dejo los codigos.


Html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/estilo.css">
  <title></title>
</head>
<script src="jquery-3.2.1.min.js"></script>
<body>
  <div class="titulo">
    <img src="images/titulo.png" alt="Titulo de Piedra Papel o Tijera">
  </div>
  <div class="contenedor">
 
 
    <div class="u">Jugador: </div><div class="usuario">0</div>
    <div class="ordenador">0</div><div class="maquina">Maquina: </div>
    <div class="clear"></div>
    <div id="resultado"></div>
    <div id="opciones">
      <input type="radio" name="elemento" id="piedra" value="piedra"><label for="piedra">Piedra</label>
      <input type="radio" name="elemento" id="papel" value="papel"><label for="papel">Papel</label>
      <input type="radio" name="elemento" id="tijera" value="tijera"><label for="tijera">Tijera</label>
    </div>
    <div id="cambiodedificultad">
      <input type="checkbox" name="dificultad" id="dificultad" value="dificultad" onclick="alert('Ahora comienza el verdadero reto')"><label for="dificultad">Cambiar la dificultad</label>
    </div>
  </div>
 
  <script type="text/javascript" src="js/juego.js"></script>
 
</body>
</html>

Js:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
$(function() {
  //Indico que se active al clickear en un radiobuton
  $('input[type="radio"]').click(function(){
    //Guardo el valor de el radio button seleccionado en la variable "elemento"
    let elemento = $('input:radio[name=elemento]:checked').val();
      //Creo una nueva variable "aleatorio" que tendrá un valor entre 0 y 2
    let aleatorio=Math.floor(Math.random()*3);
      //Segun el valor de "aleatorio" le asigno una opción
    if (aleatorio == 0) elemento_contra = "piedra";
    else if (aleatorio == 1) elemento_contra = "papel";
    else elemento_contra = "tijera";
      //Compruebo si ambas opciones (elemento y elemento_contra) son iguales y si esto ocurre digo que ganador es empate
    let ganador
    if (elemento == elemento_contra) ganador = "Empate";
    //Si esto no pasa y la opción de usuario es gana a la del ordenador digo que igualo ganador = gana usuario
    else if ((elemento == "piedra" && elemento_contra == "tijera") || (elemento == "papel" && elemento_contra == "piedra") || (elemento == "tijera" && elemento_contra == "papel")) {
      ganador = "Ganaste";
      //radio buttons de probabilidad
 
 
      // Por ultimo me sumo un punto
      let actual = parseInt($('.usuario').html());
      actual += parseInt(1);
      $('.usuario').html(actual);
      if ((actual%3)==0)alert("Felicitaciones Ganaste 3 partidas");
  }
    //Le sumo un punto al ordenador.
    else {
      ganador = "Perdiste";
      var actual = parseInt($('.ordenador').html());
      actual += parseInt(1);
      $('.ordenador').html(actual);
    }
      //Por ultimo agrego un texto siempre sera el mismo, y solo cambia la parte de las variables
    $('#resultado').html("Usuario juega " + elemento + " - Ordenador juega " + elemento_contra + "<p> Resultado: " + ganador);
 
 
  });
});
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de [abZeroX]
Val: 39
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Llamas a una funcion con un checkbox

Publicado por [abZeroX] (14 intervenciones) el 03/05/2017 06:13:20
Hola para esto puedes usar el evento change:

1
2
3
$('#dificultad').on('change', function() {
    // tu código ...
});
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar