Selecting element with ID does not work

Question

alert($('#myTableHeader1').width());
alert($('#myTableHeader1').outerWidth());
alert($('#myTableHeader1').innerWidth());

None of the above works. Even though I have

<th id="myTableHeader1" width="12%"> testest</th>

I get the error

null is null or not an object

@linesomeday yes i have. I have the following in my head tag — 124697, Mar 07 '11 at 17:19
Are you sure that an element with id "myTableHeader1" exists on the page? — JohnFx, Mar 07 '11 at 17:25
Does it work if you run it from a command line in the IEDevToolbar or FireBug? — JohnFx, Mar 07 '11 at 17:28
@Šime Vidas all of the elert's lines. ive tried them all seerately and whenever i do i get an error on the line that the alert is on — 124697, Mar 07 '11 at 17:28
You've given only a small bit of code. Nothing in the code you provided will cause an error. Please post the actual code that causes the error. — user113716, Mar 07 '11 at 17:28
Show us what the rest of the page looks like. The code above works, it looks like there is something else wrong with the page and not this code. Tested here: http://jsfiddle.net/nVBkB/ — nolabel, Mar 07 '11 at 17:30
If you're genuinely interested in an answer, you need to provide more information. Since you haven't provided any, I'm voting to close because the question can't be answered in its current form. — user113716, Mar 07 '11 at 17:54

score 0 · Answer 1 · edited May 23 '17 at 12:19

0

jQuery(function(){ 

    alert(jQuery('#myTableHeader1').width());
    alert(jQuery('#myTableHeader1').outerWidth());
    alert(jQuery('#myTableHeader1').innerWidth());

});

Problem is you be running your JavaScript code even before nodes are created. So you may either add JavaScript at the bottom or run your code after dom ready.

Whatever is passed to jQuery runs at dom ready

jQuery(function(){

    // codes written here runs at dom ready

});

Note : below written type1 and type2 are same thing

Type 1

jQuery(function(){

});

Type 2

$(document).ready(function() { 


}) ;

What is the difference between these jQuery ready functions?

edited May 23 '17 at 12:19

Community

1
1

answered Mar 07 '11 at 17:19

Praveen Prasad

31,561
18
73
106

3

You also need an explanation. – SLaks Mar 07 '11 at 17:20
So your telling them to wait till the DOM is ready. Sounds right to me. Alternatively place script at bottom of page. – Vinnyq12 Mar 07 '11 at 17:22
@Praveen You are using `jQuery` and `$` interchangeably. No need for that. – Šime Vidas Mar 07 '11 at 17:25
I get the same error even though i put it in the Jquery function. also i tired putting it right at the end of the page – 124697 Mar 07 '11 at 17:26
Correct me if I'm wrong, but I believe it's the callback passed to `jQuery(document).ready();` that fires when the DOM is ready; Not simply passing a function to the `jQuery` object. – Dan Lugg Mar 07 '11 at 17:27
he should be using `jQuery(function($){...});` and *then* `$`. – zzzzBov Mar 07 '11 at 17:27
1

@TomcatExodus: Yes, you're wrong. ;o) That's a valid shortcut for `$(document).ready()` (unless an old version of jQuery is used). – user113716 Mar 07 '11 at 17:30
@TomCat, they are same thing: http://stackoverflow.com/questions/2662778/what-is-difference-of-function-and-document-readyfunction – Praveen Prasad Mar 07 '11 at 17:30
**@patrick dw & @Praveen Prasad;** Did not know that, thank you :) *Note: How old is old? `< 1.5`?* – Dan Lugg Mar 07 '11 at 17:32
@Tomcat: I was wrong about the older version. Looks like it's been supported since version 1.0. http://api.jquery.com/jquery#jQuery3 – user113716 Mar 07 '11 at 17:36
**@patrick dw**; Ah, I was unfamiliar with the shortcut. I've always used the `.ready()` syntax. – Dan Lugg Mar 07 '11 at 17:38

score 0 · Answer 2 · answered Mar 07 '11 at 17:26

You're probably trying to access the elements before they exist in the dom. The way to do this is to listen for the window.onload, or document.ready events. jQuery makes this very easy as the standard factory method can take a function to automatically bind to the document.ready event:

jQuery(function($){});

This has an added bonus that it can be used to alias jQuery to $ to allow for the compatibility of using $ while not having to worry about noConflict.

jQuery(function($){

  alert($('#myTableHeader1').width());
  alert($('#myTableHeader1').outerWidth());
  alert($('#myTableHeader1').innerWidth());

});

You would do well to start using console.log instead of alert as you can use firebug or the built-in console in opera or chrome.

to use console.log you should check that console exists:

if (window.console)
{
  console.log(
    $('#myTableHeader1').width(),
    $('#myTableHeader1').outerWidth(),
    $('#myTableHeader1').outerWidth()
  );
}

This may or may not be the solution you're looking for. To tell you'll need to post the HTML along with the JavaScript. It may be as simple as a misspelling, or bad html syntax.

Accessing elements before they're in the DOM won't cause the error OP is getting. — user113716, Mar 07 '11 at 17:34

score 0 · Answer 3 · answered Mar 07 '11 at 17:31

0

Given you have console available, this should work.

$(document)
    .ready(function(){
        console.log(
            $('#myTableHeader1').width(),
            $('#myTableHeader1').outerWidth(),
            $('#myTableHeader1').outerWidth()
        );
    });

answered Mar 07 '11 at 17:31

Dan Lugg

20,192
19
110
174

What is the `e` parameter for? You don't get an `event` argument with `.ready()`. – user113716 Mar 07 '11 at 17:33

Muhamad Bhaa Asfour · Answer 4 · 2011-03-07T17:44:17.430

0

i think jquery wouldn't get your th if it isn't in table

so try this for html :

<table>
<tr>
    <th id="myTableHeader1" width="12%"> testest</th>
</tr>
</table>

and this for your jquery :

$(document).ready(function() {
alert($('#myTableHeader1').width());
alert($('#myTableHeader1').outerWidth());
alert($('#myTableHeader1').innerWidth());
});

here is a working example : here

edited Mar 07 '11 at 17:44

answered Mar 07 '11 at 17:35

Muhamad Bhaa Asfour

1,075
3
22
39

Selecting element with ID does not work

4 Answers4