pass a paramenter into object and use it for querySelector but return 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');

I try to create a object and pass a parameter into it.

it works fine when I console.log this property

but when I try to use querySelector, it return null

anyone know why it return null?

provide minimal information to debug your issue. Show us your html and relevant scripts — ScanQR, Nov 29 '16 at 06:05
`return console.log(param)` gives `Illegal return statement` error — asdf_enel_hak, Nov 29 '16 at 06:06
@RobG `# ` already there `var foo = new ajaxFileUploader('#myFrom');` — prasanth, Nov 29 '16 at 06:08
Are you sure the form exists when you call the function? (note typo in the call: '#myFrom'). Hey Xufox, just thought the same thing… — RobG, Nov 29 '16 at 06:12

score 0 · Accepted Answer · answered Nov 29 '16 at 06:20

0

enclose the whole code within window.onload=function(){}. you might have placed the script in head but the elements are at body thats why element loads late and script returns null. if you use window.onload=function(){} the script will run after the whole document once loaded

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>

answered Nov 29 '16 at 06:20

jafarbtech

6,842
1
36
55

sry i just notice i have typo, i type form to from, took me many hours to find out, XD – Benjamin W Nov 29 '16 at 06:23
ha haa... no issues ;) – jafarbtech Nov 29 '16 at 06:24
then click on the `close` button in your question which will prevent users from trying answer it again and again – jafarbtech Nov 29 '16 at 06:26

score 0 · Answer 2 · answered Nov 29 '16 at 06:36

There is an issue with respect to context get lost of 'this'

Solution 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');

Solution 2:

Another solution is you can use "formId" which will get by lexical context of function.

pass a paramenter into object and use it for querySelector but return null

2 Answers2