I'm having issues getting input from a document and outputting it using the this keyword. When outright calling the object and attribute followed by .value I didn't encounter a problem, but trying to use this has become a complication. Calling person.display results in undefined areas. I've looked for how to get a value for this and I'm starting to get further away from the solution. Could someone provide help?
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", );
You need to reference the value when you are building the string. You need to call your function onclick. With those changes, your code will work fine.
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>