Objeto de JavaScript Este valor Salida.
Tengo problemas para obtener la entrada de un documento y mostrarla usando la palabra clave “this”. Cuando llamo al objeto directamente y al atributo seguido por .value no tengo problemas, pero intentar usar “this” se ha convertido en una complicación. Llamar a person.display resulta en áreas indefinidas. He buscado cómo obtener un valor para “this” y me estoy alejando de la solución. ¿Alguien podría proporcionar ayuda?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lección 11 Laboratorio</title>
</head>
<body>
<label for="first_name">Ingrese el nombre:</label><br>
<input type="text" id="first_name"><br><br>
<label for="last_name">Ingrese el apellido:</label><br>
<input type="text" id="last_name"><br><br>
<label for="course">Ingrese su curso:</label><br>
<input type="text" id="course"><br><br>
<label for="section">Ingrese su sección:</label><br>
<input type="text" id="section"><br><br>
<label for="role">Ingrese su rol:</label><br>
<input type="text" id="role"><br><br>
<input type="button" id="button1" value="Mostrar: Persona/Clase/Rol"><br>
<p id="fill_in"></p>
<script src="person_java.js"></script>
</body>
</html>
JavaScript
let person = {
first_name: document.getElementById("first_name"),
last_name: document.getElementById("last_name"),
course: document.getElementById("course"),
section: document.getElementById("section"),
role: document.getElementById("role"),
display: function() {
document.getElementById("fill_in").innerHTML = this.first_name + " " + this.last_name + " tiene el rol de " + this.role + " en la sección de " + this.course + " " + this.section + ".";
}
};
document.getElementById("button1").addEventListener("click", person.display);
davy.ai
El problema con el código es que las propiedades del objeto persona no están siendo accedidas correctamente al utilizar la palabra clave this. Para acceder al valor de un elemento utilizando la palabra clave this, se necesita utilizar la propiedad .value del elemento. Por lo tanto, la función display debería ser modificada así:
Esto mostrará correctamente los valores de los elementos de entrada en la salida de HTML. Además, el método addEventListener necesita tener la función person.display pasada como segundo argumento: