1

estoy realizando un programa que evalúa la edad de la persona, y, dependiendo de su edad, salen diferentes resultados. Tengo un problema con onclick en el input, si llamo a mi función o método en la consola, me funciona y cumple con todo lo anterior. No entiendo porque falla. Aquí el código:

<DOCTYPE html>
<html lan="es">
<head>
    <meta charset="UTF-8">
    <title>Ejercicio</title>
    <!-- Crear un programa en el que el usuario ingresapor 
    prompt su edad y en la cual se compruebe si la persona es menor 
    de 18 años informe por mensaje que no puede ingresar y 
    en la que el usuario es mayor
    o igual a 18 años de edad informe que si puede ingresar-->
    <script> 
    let edad = () =>{
        let num1 = parseInt(document.form1.edad.value);
        if(num1>=18){
            document.write("A ingresado exitosamente");
            alert("Ingresa aceptado");
        }else if(num1 < 18){
            if(num1==0||num1<0){
                alert("Error");
            }else if(num1>60){
                alert("Ingreso exitoso");
                document.write("Felicidades ingreso exitoso");
            }else{
                alert("Acceso denegado");
                document.write("Ingreso no permitido");
            }
        }
    }
    </script>
</head>
<body>
    <head>
        <h1>Ingresa tú edad para inicias</h1>
    </head>
    <main>
        <form name="form1">
            <label>Nombre:</label>
            <input type="text" name="name" value="name">
            <label>Apellido:</label>
            <input type="text" name="lastname" value="lastname">
            <label>Edad:</label>
            <input type="number" name="edad" value="edad">
            <input type="button" value="Enviar" onclick="edad()">
        </form>
    </main>
</body>
</html>

3 respuestas 3

1

Cambia el nombre de la variable o de la funcion, cuando haces un click de un boton en el formulario, este esta en el contexto del form, y dentro del el ya hay un objeto llamado edad. que es el name de tu input. De hecho si hicieras un:

<input type="button" value="Enviar" onclick="console.log(edad)">

Te imprimiria el input. Simplemente cambia el nombre de la funcion

<script> 
    let validarEdad = () =>{
        let num1 = parseInt(document.form1.edad.value);
        if(num1>=18){
            document.write("A ingresado exitosamente");
            alert("Ingresa aceptado");
        }else if(num1 < 18){
            if(num1==0||num1<0){
                alert("Error");
            }else if(num1>60){
                alert("Ingreso exitoso");
                document.write("Felicidades ingreso exitoso");
            }else{
                alert("Acceso denegado");
                document.write("Ingreso no permitido");
            }
        }
    }
    </script>

y ya en tu onclick lo llamas

<input type="button" value="Enviar" onclick="validarEdad()">
1
  • Muchas gracias cambiando en nombre de la variable llego a funcionar, gracias, a uno no llegue a ver POO en js a un pero muchas gracias, si ya me había pasado en otros ejercicios antes pero no lo recordaba hasta ahora. Igual gracias. Y lo mismo para las otras respuestas que dan consejos sobre buenas practicas Commented el 28 ene. 2022 a las 17:25
0

Poner eventos como atributo en los elementos, es una mala practica.

Te dejo como podrías hacerlo :

var button = document.getElementById("btn"); // accedemos al botón con su id

var boleano = true;

button.onclick = function() { // le agregamos el evento onclick
  // con this accedemos al elemento botón
  if (boleano) { // si es true el color cambiará a rojo
    this.style.color = "red";
    boleano = false;
  } else { // si es false el color cambiará a negro
    this.style.color = "black";
    boleano = true;
  };
}
<button id="btn">Evento Click</button>

Espero haberte ayudado! :)

2
  • Esta genial también de esta forma osea que me dices que no use el onclick o onchange si que que lo añada como un evento. No sabia que se podía usar de esa manera hay alguna fuente o documentación que habla mas de ello. Desde ya gracias Commented el 28 ene. 2022 a las 17:23
  • @SolomanContreras aquí te dejo la documentación: developer.mozilla.org/es/docs/Web/API/GlobalEventHandlers/…
    – Daniel
    Commented el 28 ene. 2022 a las 19:30
0

Copié y pegué tu código en un archivo HTML y lo corrí usando Live Server y me salió este error:

Uncaught TypeError: edad is not a function at HTMLInputElement.onclick

Así que estuve investigando y leí esta pregunta.

Así que cambié solo la línea

let edad = () =>{

a

function Edad(){

cambiando también como lo llamo en onClick

Al final, queda algo así:

<html lan="es">

<head>
    <meta charset="UTF-8">
    <title>Ejercicio</title>
    <!-- Crear un programa en el que el usuario ingresapor 
    prompt su edad y en la cual se compruebe si la persona es menor 
    de 18 años informe por mensaje que no puede ingresar y 
    en la que el usuario es mayor
    o igual a 18 años de edad informe que si puede ingresar-->
</head>

<body>

    <head>
        <h1>Ingresa tú edad para inicias</h1>
    </head>
    <main>
        <form name="form1">
            <label>Nombre:</label>
            <input type="text" name="name" value="name">
            <label>Apellido:</label>
            <input type="text" name="lastname" value="lastname">
            <label>Edad:</label>
            <input type="number" name="edad" value="edad">
            <input type="button" value="Enviar" onclick="Edad()">
        </form>
    </main>
</body>
<script>
    function Edad(){
        let num1 = parseInt(document.form1.edad.value);
        if (num1 >= 18) {
            document.write("A ingresado exitosamente");
            alert("Ingresa aceptado");
        } else if (num1 < 18) {
            if (num1 == 0 || num1 < 0) {
                alert("Error");
            } else if (num1 > 60) {
                alert("Ingreso exitoso");
                document.write("Felicidades ingreso exitoso");
            } else {
                alert("Acceso denegado");
                document.write("Ingreso no permitido");
            }
        }
    }
</script>
</html>

Como buena práctica, te recomiendo poner tu tag <script> al final de tu documento.

2
  • Dale gracias por tu consejo Commented el 28 ene. 2022 a las 17:19
  • Muchas gracias por tu consejo y tiempo, lo voy a tener en cuenta cuando haga nuevos practicas. Desde ya gracias Commented el 28 ene. 2022 a las 17:29

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.