オブジェクトにパラメータを渡して、それをquerySelectorに使用しますが、nullを返します。

Question

var ajaxFileUploader = function(formId){ 
    this.formId = formId; 

    console.log(this.formId); //myForm 
    return console.log(
     document.querySelector(this.formId)// null 
    ); 
} 

var foo = new ajaxFileUploader('#myFrom'); 

私はオブジェクトを作成し、それにパラメータを渡そうとします。

私は、このプロパティに

をCONSOLE.LOGが、私はquerySelectorを使用しようとすると、それはnullを返しなぜ

誰もが知っているnullを返したときに、それが正常に動作しますか？

Answer 1

window.onload=function(){}のコード全体を囲みます。スクリプトを頭に置いたかもしれませんが、要素はbodyにあり、要素が遅く読み込まれ、scriptがnullを返す理由です。あなたがwindow.onload=function(){}を使用する場合、スクリプトは、文書全体が一度

window.onload=function(){ 
 
var ajaxFileUploader = function(formId){ 
 
    this.formId = formId; 
 

 
    console.log(this.formId); //myForm 
 
    return console.log(document.querySelector(this.formId)); 
 
} 
 

 
var foo = new ajaxFileUploader('#myFrom'); 
 
    }

<form id="myFrom" action="demo_form.asp" method="get"> 
 
    First name: <input type="text" name="fname"><br> 
 
    Last name: <input type="text" name="lname"><br> 
 
    <input type="submit" value="Submit"> 
 
</form>

Answer 2

は「この」

ソリューション1の迷子コンテキストに関して問題があります読み込まれた後に実行されます：

var ajaxFileUploader = function(formId){ 
    this.formId = formId; 
    console.log(this.formId); 
    var logger = console.log.bind(this); 
    return logger(
     document.querySelector(this.formId) 
    ); 
} 

var foo = new ajaxFileUploader('#myFrom'); 

ソリューション2：

もう1つの解決策は、関数の字句的コンテキストによって取得される "formId"を使用することです。