个人中心
gpt4 book ai didi

javascript - 如何使用 ES6 Javascript 类验证和显示表单数据

转载 作者：行者123 更新时间：2023-11-27 22:52:53 25 4
gpt4 key购买 nike

我正在尝试创建一个接受用户输入并使用 HTML/JS ES6 显示的表单。

到目前为止，我已经引用了这个 link但我还在挣扎。

我的确切错误是 here我的代码在下面。

我的问题是，什么是 Uncaught Type 错误？为什么 meeting.sessiontitle 不是函数，而 meeting.date 是函数？

此外，如果我的代码中有任何其他错误或我应该使用更好的技术，请告诉我。我只需要在正确的方向上轻推，我很肯定我可以处理剩下的事情。谢谢!

script.js

class TechClubMeeting {
  constructor(Date, sessiontitle, speaker) {
    this.Date = Date;
    this.sessiontitle = "sessiontitle";
    this.speaker = "speaker";
  }

  meetingString(){
    console.log('${this.Date},${this.sessiontitle},${this.speaker}');
  }
}

//inherit TechClubMeeting methods and properties
class NewMeeting extends TechClubMeeting{
  Date(){
    console.log(this.date)
  }
  sessiontitle(){
    console.log(this.sessiontitle)
  }
  speaker(){
    console.log(this.speaker)
  }
};

const meeting= new NewMeeting(this.Date, this.sessiontitle, this.speaker);
  meeting.Date();
  meeting.sessiontitle();
  meeting.speaker();

//display results on page
function showInput() {
    document.getElementById('display').innerHTML =
                document.getElementById(meeting.Date()).value;
    document.getElementById('Sessiontitle').innerHTML =
                document.getElementById(meeting.sessiontitle()).value;
    document.getElementById('Speaker').innerHTML =
                document.getElementById(meeting.speaker()).value;
}

index.html

<!DOCTYPE html>
<html>
  <head lang="en">
  <meta charset="UTF-8">
  <title>Tech Club Meeting Organizer</title>
  </head>
<body>

  <form>
  <div>
    <label><b>Speaker:</b></label>
    <input type="text" id="speaker">
  </div>
  <br><br>
  <div>
    <label><b>Session Title:</b></label>
    <input type="text" id="sessiontitle">
  </div>
  <div>
    <label><b>Date:</b></label>
    <input type="text" id="Date">
  </div>
  </form>
  <br>
  <input type="submit" value="Add a new meeting" onclick="showInput();"><br/>
  <br>
  <label>Meeting Schedule: </label>
  <p><span id='display'></span></p>
  <p><span id='Sessiontitle'></span></p>
  <p><span id='Speaker'></span></p>
</body>
<script src="script.js">
</script>
</html>

最佳答案

如果您想理解您的代码，您应该阅读 JavaScript 中的 OOP 和继承(使用新的类语法和旧的构造函数)。我将尝试向您解释一下您的代码中发生了什么。

  1. TechClubMeeting 是 NewMeeting 的父级，您创建了 3 个属性:sessiontitle、speaker 和 Date(不要命名属性带有保留字!!!Date 是 JS 中的保留字)和一个名为 meetingString 的方法。

  2. 如果您在父类中分配了 this.sessiontitle = "sessiontitle";，则每个子类都将具有此属性，它是一个字符串而不是一个函数!

  3. 如果您使用 new 关键字创建对象，则会将所有属性添加到该对象并将所有方法添加到其原型(prototype)。

  4. 你不在子类中使用构造函数，所以将使用父类构造函数

  5. 当您调用 new NewMeeting(this.Date, this.sessiontitle, this.speaker) 时，您会创建以下对象:

    NewMeeting {sessiontitle: "sessiontitle", speaker: "speaker", Date: ƒ}
     Date: ƒ Date()
     sessiontitle: "sessiontitle"
     speaker: "speaker"
      __proto__: TechClubMeeting
        Date: ƒ Date()
        constructor: class NewMeeting
        sessiontitle: ƒ sessiontitle()
        speaker: ƒ speaker()
         __proto__: Object
          ....

  6. 当您尝试调用 meeting.sessiontitle() 时，您正在尝试将字符串作为函数调用，因为 javascript 首先遇到 sessiontitle 等于 ” session 标题”。这会生成您的错误 Uncaught TypeError: meeting.sessiontitle is not a function

备注:当您调用 new NewMeeting(this.Date, this.sessiontitle, this.speaker) 时，this 指的是全局对象，所以 this.Date 是一个在单个时刻创建字符串的函数。 this.sessiontitle 或 this.speaker 可以是带有名为 sessiontitle 或 speaker 的 id 的 html 标签或分配给的其他值全局对象。

所以在我看来这段代码是完全错误的:)

关于javascript - 如何使用 ES6 Javascript 类验证和显示表单数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58424680/

25 4 0
文章推荐： javascript - Canvas 绘制图像被下面的代码遮挡
文章推荐： C++ 移动赋值运算符返回类型
文章推荐： javascript - 如何使用canvas javascript对文本进行动画处理并设置最大宽度和高度
文章推荐： c++ - 在作为函数参数的句柄上调用 CloseHandle？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com