呼び出すクラス関数が期待どおりに応答しない

Question

変数valioを呼び出す際に問題があります。入力にテキストを入力して呼び出した後、コンソールは「今登録済み 未定義」を返します。

私はこのタイプの呼び出しでは経験はありますが、これまでに何も起こりませんでした。

var name = document.getElementById("name"); 
var email = document.getElementById("email"); 
var comment = document.getElementById("comment"); 

class User{ 
constructor(username,comment,email){ 
    this.username = username; 
    this.comment = comment; 
    this.email = email; 
    } 
    register(){ 
    console.log(this.username + this.comment + " is now registered"); 
    } 
} 

var valio = new User(name.value , comment.value, email.value); 

     <input id="name" type="text" value=""><br> 
     <input id="email" type="text" value=""><br> 
     <input id="subject" type="text" value=""><br> 
     <input id="comment" type="text" value=""><br> 

Answer 1

name変数がjavascriptのキーワードと競合しているようです。他の名前に変更してみてください。

var nameInput = document.getElementById("name"); 

次に、nameInput.valueをコンストラクタに渡します。

Answer 2

名前入力フィールドへの参照をnameという変数に入れます。しかし、nameはすでに文字列型のグローバル変数として定義されます：それはおそらく

https://developer.mozilla.org/en-US/docs/Web/API/Window/name

をオーバーライドすることはできません。 unameに変数nameウル

var username = document.getElementById("name"); 

var valio = new User(username.value , comment.value, email.value); 

Answer 3

を変更：

は、変数名を変更してみてください。

var uname = document.getElementById("name"); 
var email = document.getElementById("email"); 
var comment = document.getElementById("comment"); 

class User{ 
    constructor(username,comment,email){ 
    this.username = username; 
    this.comment = comment; 
    this.email = email; 
    } 
    register(){ 
    console.log(this.username + this.comment + " is now registered"); 
    } 
} 

var valio = new User(uname.value , comment.value, email.value); 

    <input id="name" type="text" value=""><br> 
    <input id="email" type="text" value=""><br> 
    <input id="subject" type="text" value=""><br> 
    <input id="comment" type="text" value=""><br>