Tengo problemas para obtener información de un documento y generarlo con esta palabra clave. Cuando llamé directamente al objeto y al atributo seguido de .value, no encontré ningún problema, pero tratar de usar esto se ha convertido en una complicación. Llamar a person.display da como resultado áreas indefinidas. He buscado cómo obtener un valor para esto y estoy empezando a alejarme más de la solución. ¿Alguien podría proporcionar ayuda?
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Lesson 11 Lab</title> </head> <body> <label for="first_name">Enter first name:</label><br> <input type="text" id="first_name"><br><br> <label for="last_name">Enter last name:</label><br> <input type="text" id="last_name"><br><br> <label for="course">Enter your course:</label><br> <input type="text" id="course"><br><br> <label for="section">Enter your section:</label><br> <input type="text" id="section"><br><br> <label for="role">Enter your role:</label><br> <input type="text" id="role"><br><br> <input type="button" id="button1" value="Show: Person/Class/Role"><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 + " has the role of " + this.role + " in " + this.course + " section " + this.section + "."; } }; document.getElementById("button1").addEventListener("click", );Debe hacer referencia al valor cuando esté construyendo la cadena. Debe llamar a su función onclick. Con esos cambios, su código funcionará bien.
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.value + " " + this.last_name.value + " has the role of " + this.role.value + " in " + this.course.value + " section " + this.section.value + "."; } }; document.getElementById("button1").addEventListener("click", function (){ person.display(); }); <label for="first_name">Enter first name:</label><br> <input type="text" id="first_name"><br><br> <label for="last_name">Enter last name:</label><br> <input type="text" id="last_name"><br><br> <label for="course">Enter your course:</label><br> <input type="text" id="course"><br><br> <label for="section">Enter your section:</label><br> <input type="text" id="section"><br><br> <label for="role">Enter your role:</label><br> <input type="text" id="role"><br><br> <input type="button" id="button1" value="Show: Person/Class/Role"><br> <p id="fill_in"></p>