0

Estoy creando un programa donde permitimos la entrada a un establecimiento (gratis con pase o paga sin pase) o la negamos de acuerdo a la edad del cliente. El problema aparentemente radica en que no reconoce el value true o false del checkbox (que valida si la entrada es paga o no) y no mantiene el mensaje impreso, sino que lo muestra sólo durante una fracción de segundo. Muchas gracias por la ayuda!

// Creamos un DOM element (Aquí no hay problema).
const response = document.querySelector('#response');
const responseParagraph = document.createElement('p');
response.appendChild(responseParagraph);

// Recogemos el valor del checkbox (Aparentemente aquí se encuentra el problema).
let checkbox = document.querySelector('#checkbox');
let freePass = checkbox.addEventListener( 'change',  () => {
    (this.checked) ? true : false });

// Evaluamos las condiciones.
let validarPermiso = () => {
    let clientAge = document.getElementById('clientAge').value;
    if (clientAge >= 18 && clientAge < 70) {
        if (freePass == true) { // Este bloque jamás arroja true.
            responseParagraph.innerHTML = 'Adelante, disfrutá gratis de la fiesta.'
        } else {responseParagraph.innerHTML = 'Adelante, pagá la entrada y disfrutá de la fiesta.'}
    } else {responseParagraph.innerHTML = 'Lo siento, no podés pasar.'}}
<h3>Validación de entrada</h3>

    <form name="form" onsubmit="validarPermiso()">
    
        <input type="number" id="clientAge" placeholder="Ingresa tu edad.">
        
        <label for="checkbox"><input type="checkbox" id="checkbox">¿Tenés tu pase?</label>
        
        <input type="submit" value="Confirmar"/>

    </form>
    
    <div id="response"></div> <!-- Aquí se imprimirá la respuesta. -->

2 respuestas 2

0

Tu código esta bien, lo único que te falta es prevenir el default del formulario para no salir de la página. Añade un id a tu formulario: <form name="form" id="formid" onsubmit="validarPermiso()">

y un eventListener para prevenir el default:

document.getElementById('formid').addEventListener('submit', function(e) {
    e.preventDefault();

==== EDIT ====

El otro problema es que asignas la respuesta del event listener a tu variable, en vez de asignar el valor. Hay un segundo problema y es el uso de arrow functions y this. Cuando usas arrow functions el this no esta binded a la funcion en si. Una forma facil de arreglarlo es esto:

let freePass;

// Usa esta syntaxis para las funciones si necesitas usar el kw this
checkbox.addEventListener( 'change',  function() {
    freePass = (this.checked) ? true : false });
3
  • Muchas gracias, me ha solucionado el problema de la salida de la página. Cómo puedo corregir el error en segunda la condición? Commented el 21 jul. 2021 a las 14:46
  • Edito la respuesta para contestarlo Commented el 21 jul. 2021 a las 15:02
  • Ahora si! Me anoto que no debo usar ambas al mismo tiempo, gracias!! Commented el 21 jul. 2021 a las 17:09
0

Realizando la revisión de lo que tienes, ciertamente hay 2 cosas que se detectan.

  1. Para entender un poco el comportamiento del formulario con la etiqueta form, observemos lo siguiente:

    • El atributo onSubmit permite asociar una función de test en el formulario. Si la función retorna falso, los datos del formulario no se envían, quedan en la página.
    • El atributo name permite a un script acceder a su contenido. Es preferible utilizar los dos atributos con el mismo identificador, por motivos de compatibilidad, es decir el atributo name y el atributo id llamen igual.
    • El atributo action indica la página a la que se envían los datos del formulario. Si este atributo está vacío, es la página que contiene el formulario la que se recargará con los datos como parámetros.

    Teniendo en cuenta estos puntos, lo que hacemos es que al ejecutar el onSubmit le agregamos el preventDefault para cancelar el evento, sin detener el resto del funcionamiento del evento, es decir, puede ser llamado de nuevo

    Dejo enlaces de apoyo: https://www.um.es/docencia/barzana/DAWEB/Formularios-HTML5.html https://developer.mozilla.org/es/docs/Web/API/Event/preventDefault

  2. analizando el código, se observa que al ejecutarse el evento change en el checkbox, haces una validación sobre una variable que tiene un scope global, llamado this.checked. esta, puede que cuando le llamas en este flujo su valor sea undefined y nunca logre cumplir con lo requerido. Te comparto una forma mejor de como puedes obtener la info que necesitas:

    let freePass = false; // Inicializamos la variable en false,
    checkbox.addEventListener('change', (e) => {
      freePass = e.target.checked; // almacenamos el checked del input a la variable global freePass
    });
    

Comparto el código funcional.

// Creamos un DOM element (Aquí no hay problema).
const response = document.querySelector('#response');
const responseParagraph = document.createElement('p');
response.appendChild(responseParagraph);

// Anexamos el preventDefault
document.getElementById('form').addEventListener('submit', function(e) {
  e.preventDefault();
});

// Recogemos el valor del checkbox (Aparentemente aquí se encuentra el problema).
let checkbox = document.querySelector('#checkbox');
let freePass = false; // Inicializamos la variable en false,
checkbox.addEventListener('change', (e) => {
  freePass = e.target.checked; // almacenamos el checked del input a la variable global freePass
});

// Evaluamos las condiciones.
let validarPermiso = () => {
  let clientAge = document.getElementById('clientAge').value;
  if (clientAge >= 18 && clientAge < 70) {
    if (freePass) {
      responseParagraph.innerHTML = 'Adelante, disfrutá gratis de la fiesta.';
    } else {
      responseParagraph.innerHTML = 'Adelante, pagá la entrada y disfrutá de la fiesta.';
    }
  } else {
    responseParagraph.innerHTML = 'Lo siento, no podés pasar.';
  }
}
<h3>Validación de entrada</h3>

<form name="form" id="form" onsubmit="validarPermiso()">

  <input type="number" id="clientAge" placeholder="Ingresa tu edad.">

  <label for="checkbox"><input type="checkbox" id="checkbox">¿Tenés tu pase?</label>

  <input type="submit" value="Confirmar" />

</form>

<div id="response"></div>
<!-- Aquí se imprimirá la respuesta. -->

Espero te sirva. Saludos,

1
  • Muchas gracias por la info adicional! Me sirvió mucho Commented el 21 jul. 2021 a las 17:07

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.