HTML — Как проверить и отобразить данные формы с помощью класса ES6 Javascript

Как проверить и отобразить данные формы с помощью класса ES6 Javascript

Я пытаюсь создать форму, которая принимает пользовательский ввод и отображает его с помощью HTML / JS ES6.

До сих пор я ссылался на эту ссылку, но все еще борюсь.

Моя точная ошибка Вот и мой код ниже.

Мой вопрос: что такое ошибка 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

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;html{amp}gt; {amp}lt;head lang="en"{amp}gt; {amp}lt;meta charset="UTF-8"{amp}gt; {amp}lt;title{amp}gt;Tech Club Meeting Organizer{amp}lt;/title{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;form{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label{amp}gt;{amp}lt;b{amp}gt;Speaker:{amp}lt;/b{amp}gt;{amp}lt;/label{amp}gt; {amp}lt;input type="text" id="speaker"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;br{amp}gt;{amp}lt;br{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label{amp}gt;{amp}lt;b{amp}gt;Session Title:{amp}lt;/b{amp}gt;{amp}lt;/label{amp}gt; {amp}lt;input type="text" id="sessiontitle"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;div{amp}gt; {amp}lt;label{amp}gt;{amp}lt;b{amp}gt;Date:{amp}lt;/b{amp}gt;{amp}lt;/label{amp}gt; {amp}lt;input type="text" id="Date"{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;/form{amp}gt; {amp}lt;br{amp}gt; {amp}lt;input type="submit" value="Add a new meeting" onclick="showInput();"{amp}gt;{amp}lt;br/{amp}gt; {amp}lt;br{amp}gt; {amp}lt;label{amp}gt;Meeting Schedule: {amp}lt;/label{amp}gt; {amp}lt;p{amp}gt;{amp}lt;span id='display'{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{amp}lt;span id='Sessiontitle'{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;p{amp}gt;{amp}lt;span id='Speaker'{amp}gt;{amp}lt;/span{amp}gt;{amp}lt;/p{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;script src="script.js"{amp}gt; {amp}lt;/script{amp}gt; {amp}lt;/html{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector