0

Al presionar en el boton el programa entero colapsa mandando ese error, da igual que haya datos en los input o no...

let nombre = document.getElementById("nombre").value;
let edad = document.getElementById("edad").value;
let nota = document.getElementById("notaMedia").value;
let boton = document.getElementById("boton");

boton.onclick = function (e) {
    if (nombre == null || edad == null || nota == null) {
        alert("Datos incorrectos");
    } else {
        let estudiante = new Estudiante(nombre, edad, nota);
        alert(estudiante.getData());
    }
}

class Estudiante {
    constructor(nombre, edad, notaMedia) {
        this.nombre = nombre;
        this.edad = edad;
        this.notaMedia = notaMedia;
    }

    get nombre() {
        return this.nombre;
    }

    set nombre(name) {
        this.nombre = name;
    }

    get edad() {
        return this.edad;
    }

    set edad(age) {
        this.edad = age;
    }

    get notaMedia() {
        return this.notaMedia;
    }

    set notaMedia(media) {
        this.notaMedia = media;
    }

    getData() {
        return "Nombre: " + this.nombre + ",\nEdad: " + this.edad + ",\nNota Media: " + this.notaMedia;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicio 3 usando POO</title>
</head>

<body>
    Nombre: <input type="text" name="" id="nombre"><br>
    Edad: <input type="text" name="" id="edad"><br>
    Nota Media: <input type="text" name="" id="notaMedia"><br>
    <input type="button" value="Almacenar" id="boton">
    <script src="script.js"></script>
</body>

</html>

1
  • 1
    Debes capturar los valores de los inputs dentro del manejador de eventos del clic del botón. Empieza por eso. Commented el 8 jun. 2022 a las 12:02

1 respuesta 1

2

Inicialmente, debes declarar las variables dentro de la función, para que ya las tome con valores, si las declaras cuando carga la página, serán valores en blanco siempre, no nulos. El código es mucho mas sencillo que lo que intentas, te tejo un ejemplo funcional.

    let boton = document.getElementById("boton");
    class Estudiante {
        constructor(nombre, edad, notaMedia) {
            this.nombre = nombre;
            this.edad = edad;
            this.notaMedia = notaMedia;
        }
        getData() {
            return "Nombre: " + this.nombre + ",\nEdad: " + this.edad + ",\nNota Media: " + this.notaMedia;
        }
    }
    boton.onclick = function (e) {
        let nombre = document.getElementById("nombre").value;
        let edad = document.getElementById("edad").value;
        let nota = document.getElementById("notaMedia").value
        if (nombre == "" || edad == "" || nota == "") {
            alert("Datos incorrectos");
        } else {
            let estudiante = new Estudiante(nombre, edad, nota);
            alert(estudiante.getData());
        }
    }

EDIT:

Aqui va el nuevo código con las aclaraciones que hizo el autor de la pregunta.

let boton = document.getElementById("boton");

boton.onclick = function (e) {
    let nombre = document.getElementById("nombre").value;
    let edad = document.getElementById("edad").value;
    let nota = document.getElementById("notaMedia").value;
    if (nombre == null || edad == null || nota == null) {
        alert("Datos incorrectos");
    } else {
        let estudiante = new Estudiante(nombre, edad, nota);
        alert(estudiante.getData());
    }
}

class Estudiante {
    constructor(nombre, edad, notaMedia) {
        this.nombre = nombre;
        this.edad = edad;
        this.notaMedia = notaMedia;
    }

    get nombre1() {
        return this.nombre;
    }

    set nombre1(name) {
        this.nombre = name;
    }

    get edad1() {
        return this.edad;
    }

    set edad1(age) {
        this.edad = age;
    }

    get notaMedia1() {
        return this.notaMedia;
    }

    set notaMedia1(media) {
        this.notaMedia = media;
    }

    getData() {
        return "Nombre: " + this.nombre1 + ",\nEdad: " + this.edad1 + ",\nNota Media: " + this.notaMedia1;
    }
}

Al utilizar los Get y set estabas asignándole un nombre igual al de las variables definidas en la clase, eso te estaba generando el error. Simplemente cambié el nombre agregando un 1 al final (no es una buena práctica utilizar los mismos nombres de variables agregando números, pero ejemplifica lo que necesitas para la solución). Espero te sirva. Exitos

4
  • Pero tu lo que haces es borrar todos los getter y setter, aunque funcione el programa (si funciona, lo comprobé), quiero tener la posibilidad de modificar los atributos del objeto a través de los setter, pero me sigue dando el mismo error si los dejo
    – GreenLass
    Commented el 8 jun. 2022 a las 16:05
  • @GreenLass Por eso debes ser mas claro a la hora de preguntar. No veía la necesidad de los get y set en tu código. Por eso los eliminé en la respuesta.
    – Liyo
    Commented el 8 jun. 2022 a las 19:14
  • @GreenLass fijate ahora si el código que te pasé en la respuesta resuelve tus dudas. Es un problema de los nombres de variables que utilizas.
    – Liyo
    Commented el 8 jun. 2022 a las 19:34
  • Si, ahora si que funciona. Entonces no puedo llamar los getter y setter como las variables?
    – GreenLass
    Commented el 8 jun. 2022 a las 22:18

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.