JavaScript 对象此值输出答案

【问题标题】：JavaScript Object This Value OutputJavaScript 对象此值输出
【发布时间】：2025-12-19 15:05:11
【问题描述】：

我在从文档获取输入并使用 this 关键字输出它时遇到问题。当直接调用对象和属性后跟 .value 时，我没有遇到问题，但是尝试使用它却变得很复杂。调用 person.display 会导致未定义的区域。我一直在寻找如何为此获得价值，并且我开始远离解决方案。有人可以提供帮助吗？

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", );

【问题讨论】：

this.first_name -> this.first_name.value（假设它是一个输入）或this.first_name.textContent（假设它是另一个元素）。其他人都一样。
哪个代码产生未定义的“区域”？你试过document.getElementById("button1").addEventListener("click", person.display.bind(person));吗？
在此输出中使用绑定结果：[object HTMLInputElement] [object HTMLInputElement] 在 [object HTMLInputElement] 部分 [object HTMLInputElement] 中具有 [object HTMLInputElement] 的作用。
@KyleDavis 请注意，only 使用 JSFiddle 是不够的。问题必须是独立的，因此重现问题所需的所有代码都必须在问题本身中。 Stack sn-ps 可用于演示 like JSFiddle.
@KyleDavis 因为this 取决于函数的调用方式。当您将person.display 传递给.addEventListener() 时，您仅传递函数本身，而没有person 上下文。见How does the "this" keyword work?

标签： javascript object this getelementbyid

【解决方案1】：

您需要在构建字符串时引用该值。你需要调用你的函数onclick。通过这些更改，您的代码将可以正常工作。

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>

【讨论】：