Also be careful how you execute the js on the page. For example if you do something like this:

    (function(window, document, undefined){
      
      var foo = document.getElementById(&quot;foo&quot;);
      
      console.log(foo);
    
    })(window, document, undefined); 

This will return null because you&#39;d be calling the document before it was loaded.

Better option..

    (function(window, document, undefined){
    
    // code that should be taken care of right away
    
    window.onload = init;
    
      function init(){
        // the code to be called when the dom has loaded
        // #document has its nodes
      }
    
    })(window, document, undefined);

It can be caused by:

 1. Invalid HTML syntax (some tag is not closed or similar error)
 2. Duplicate IDs - there are two HTML DOM elements with the same ID
 3. Maybe element you are trying to get by ID is created dynamically (loaded by ajax or created by script)?

Please, post your code.



There could be many reason why `document.getElementById` doesn&#39;t work

 - You have an invalid ID 
&gt; ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens (&quot;-&quot;), underscores (&quot;_&quot;), colons (&quot;:&quot;), and periods (&quot;.&quot;).
(resource: https://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html)

 - you used some id that you already used as `&lt;meta&gt;` name in your header (e.g. copyright, author... ) it looks weird but happened to me: if your &#39;re using IE take a look at
(resource: http://www.phpied.com/getelementbyid-description-in-ie/)

 - you&#39;re targeting an element inside a frame or iframe. In this case if the iframe loads a page within the same domain of the parent you should target the `contentdocument` before looking for the element
(resource: https://stackoverflow.com/questions/8710100/calling-a-specific-id-inside-a-frame/8710249#8710249)

 - you&#39;re simply looking to an element when the node is not effectively loaded in the DOM, or maybe it&#39;s a simple misspelling

I doubt you used same ID twice or more: in that case `document.getElementById` should return at least the first element


Is it possible to change the template in Visual Studio 2010 so that the class definition is changed from:

    class Class1
    {
    
    }

to:

    public class Class1
    {
    
    }

When creating a new class via Add-&gt;Class in the context menu.

I would also ideally like to be able to create a class in one context menu click. I copy+paste existing class files to avoid the file dialog.



How can I change the default Visual Studio C# new class file template?

&gt; **Possible Duplicate:**  
&gt; [What is a callback function?](https://stackoverflow.com/questions/824234/what-is-a-callback-function)  

&lt;!-- End of automatically inserted text --&gt;

I have read the wikipedia definition of a callback but I still didn&#39;t get it. Can anyone explain me what a callback is, especially the following line 
&gt;In computer programming, a callback is a reference to executable code, or a piece of executable code, that is passed as an argument to other code. This allows a lower-level software layer to call a subroutine (or function) defined in a higher-level layer.

What is a callback in java

`document.getElementById(&#39;id of div that definately exists&#39;)` returns null.

I originally loaded the javascript last in order to make sure I wouldn&#39;t need to worry about the onload event. I also tried using the onload event. It&#39;s very spooky. Any ideas or help would be greatly appreciated.

getElementById returns null?

<p><code>document.getElementById('id of div that definately exists')</code> returns null.</p>
<p>I originally loaded the javascript last in order to make sure I wouldn't need to worry about the onload event. I also tried using the onload event. It's very spooky. Any ideas or help would be greatly appreciated.</p>


I have this line of code:

	$(&#39;#sitesAccordion .groupOfSites&#39;).click(function() {
        var lastOpenSite = $(this).siblings().hasClass(&#39;:not(.closedTab)&#39;);
        console.log(lastOpenSite);
	});

I get &quot;false&quot; instead of getting one of the other elements (assuming that there is one - and there must be). I guess the problem is with:

    .hasClass(&#39;:not(.closedTab)&#39;);

What is the problem?

My purpose is to create my own accordion (without using jQuery UI)

and I am trying to write it like this:

	$(&#39;#sitesAccordion .groupOfSites&#39;).click(function() {

        //Get the last opened tab
        var lastOpenSite = $(this).siblings().hasClass(&#39;:not(.closedTab)&#39;);

        //Close last opened tab and add class
        lastOpenSite.hide().toggleClass(&#39;closedTab&#39;);
        
        //Open the current Tab
        $(this).children(&#39;.accordionContent&#39;).toggle(&#39;fast&#39;);

        // remove class from open tab
        $(this).toggleClass(&#39;closedTab&#39;);


	});

Is this the best way?
thanks,
Alon

How to use in jQuery :not and hasClass() to get a specific element without a class

I want set a dropdown(select) to be change based on the value of the entries.

I have

    &lt;select id=&quot;mySelect&quot;&gt;
      &lt;option value=&quot;ps&quot;&gt;Please Select&lt;/option&gt;
      &lt;option value=&quot;ab&quot;&gt;Fred&lt;/option&gt;
      &lt;option value=&quot;fg&quot;&gt;George&lt;/option&gt;
      &lt;option value=&quot;ac&quot;&gt;Dave&lt;/option&gt;
    &lt;/select&gt;

And I know that I want to change the dropdown so that the option with the value of &quot;fg&quot; is selected. How can I do this with JQuery?

JQuery - how to select dropdown item based on value

Unfortunately I need to iterate over all the DOM elements of a page and I&#39;m wondering what the most efficient technique is. I could probably benchmark these myself and might if I have the time but I&#39;m hoping someone has already experienced this or has some options I hadn&#39;t considered.

Currently I&#39;m using jQuery and doing this:

&lt;!-- language: js --&gt;

    $(&#39;body *&#39;).each(function(){                                                                                                                            
        var $this = $(this);                                                                                                                                
        // do stuff                                                                                                                                         
    });

While it works, It seems to cause some lag on the client. It could also be tweaked with a more specific jQuery context like `$(&#39;body&#39;, &#39;*&#39;)`. It occurred to me that native Javascript is usually faster than jQuery and I found this:

&lt;!-- language: js --&gt;

    var items = document.getElementsByTagName(&quot;*&quot;);
    for (var i = 0; i &lt; items.length; i++) {
        // do stuff
    }

I&#39;m assuming the native option is faster. Wondering if there are other options I hadn&#39;t considered. Maybe a recursive option that iterates over child nodes in parallel.


Most efficient way to iterate over all DOM elements

I need to convert a js object to another object for passing onto a server post where the names of the keys differ for example

    var a = {
        name : &quot;Foo&quot;,
        amount: 55,
        reported : false,
        ...
        &lt;snip/&gt;
        ...
        date : &quot;10/01/2001&quot;
        } 

needs to turn into 

    a = {
      id : &quot;Foo&quot;,
      total : 55,
      updated: false,
      ...
      &lt;snip/&gt;
      ... 
      issued : &quot;10/01/2001&quot;
      }

where I have lookup obj available for mapping all the keys

    var serverKeyMap = {
        name : &quot;id&quot;,
        amount : &quot;total&quot;,
        reported : &quot;updated&quot;,
         ...
        date : &quot;issue&quot;
        }
      
Is there a function available in underscore.js or jQuery that I can use that does this functionality? 

thanks


Is there any way to rename js object keys using underscore.js

I have on page div:

    &lt;div id=&quot;here_table&quot;&gt;&lt;/div&gt;

and in jquery:

    for(i=0;i&lt;3;i++){
        $(&#39;#here_table&#39;).append( &#39;result&#39; +  i );
    }

this generating for me:

    &lt;div id=&quot;here_table&quot;&gt;
        result1 result2 result3 etc
    &lt;/div&gt;

I would like receive this in table:

    &lt;div id=&quot;here_table&quot;&gt;
        &lt;table&gt;
              &lt;tr&gt;&lt;td&gt;result1&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;result2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;result3&lt;/td&gt;&lt;/tr&gt;
        &lt;/table&gt;
    &lt;/div&gt;

I doing:


    $(&#39;#here_table&#39;).append(  &#39;&lt;table&gt;&#39; );

     for(i=0;i&lt;3;i++){
        $(&#39;#here_table&#39;).append( &#39;&lt;tr&gt;&lt;td&gt;&#39; + &#39;result&#39; +  i + &#39;&lt;/td&gt;&lt;/tr&gt;&#39; );
    }

     $(&#39;#here_table&#39;).append(  &#39;&lt;/table&gt;&#39; );



but this generate for me:

    &lt;div id=&quot;here_table&quot;&gt;
        &lt;table&gt; &lt;/table&gt; !!!!!!!!!!
              &lt;tr&gt;&lt;td&gt;result1&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;result2&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;&lt;td&gt;result3&lt;/td&gt;&lt;/tr&gt;
    &lt;/div&gt;

Why? how can i make this correctly?


LIVE: http://jsfiddle.net/n7cyE/

Create table with jQuery - append

I have a `iframe` like this

    &lt;iframe name=&quot;myframe1&quot; id=&quot;myframe1&quot; width=&quot;100%&quot; height=&quot;100%&quot; src=&quot;a.html&quot;&gt;
    &lt;html&gt;
    	&lt;head&gt;&lt;/head&gt;
    	&lt;frameset name=&quot;myframe2&quot; cols=&quot;0%, 100%&quot; border=&quot;0&quot; frameBorder=&quot;0&quot; frameSpacing=&quot;0&quot;&gt;
    		&lt;frame name=&quot;page1&quot; src=&quot;c.html&quot; scrolling=&quot;no&quot;&gt;&lt;/frame&gt;
    		&lt;frame name=&quot;page2&quot; src=&quot;d.html&quot; &gt;
    			&lt;html&gt;
    				&lt;head&gt;&lt;/head&gt;
    				&lt;body id=&quot;top&quot;&gt;
    					&lt;div id=&quot;div1&quot;&gt;
    						&lt;div id=&quot;div2&quot;&gt;
    							&lt;div id=&quot;div3&quot;&gt;
    								&lt;ul id=&quot;x&quot;&gt;
    									&lt;li&gt;a&lt;/li&gt;
    									&lt;li&gt;b&lt;/li&gt;
    								&lt;/ul&gt;
    							&lt;/div&gt;
    						&lt;/div&gt;
    					&lt;/div&gt;
    				&lt;/body&gt;
    			&lt;/html&gt;
    		
    		&lt;/frame&gt;
    		
    	&lt;/frameset&gt;
    &lt;/html&gt;
    &lt;/iframe&gt;

I want to refer to the element &quot;x&quot;. I tried in several ways but I couldn&#39;t find a solution. 

How to pick element inside iframe using document.getElementById

All browsers I&#39;ve come to work with allow accessing an element with `id=&quot;myDiv&quot;` by simply writing:

    myDiv

See here: http://jsfiddle.net/L91q54Lt/

Anyway, this method seems to be quite poorly documented, and in fact, the sources I come across don&#39;t even give it a mention and instead assume that one would use

    document.getElementById(&quot;myDiv&quot;)

or maybe

    document.querySelector(&quot;#myDiv&quot;)

to access a DOM element even when its ID is known in advance (i.e. not calculated at runtime). I can tell that the latter approaches have the advantage of keeping the code safe if someone inadvertedly attempts to redefine `myDiv` in a wider scope (not such a brilliant idea though...), overwrites it with some different value and goes on without noticing the clash.

But other that that? Are there any concerns in using the short form above other than code design, or what else am I missing here?


Why don&#39;t we just use element IDs as identifiers in JavaScript?

I have to use vanilla JavaScript for a project.  I have a few functions, one of which is a button that opens a menu.  It works on pages where the target id exists, but causes an error on pages where the id doesn&#39;t exist.  On those pages where the function cannot find the id, I receive a &quot;Cannot read property &#39;addEventListener&#39; of null &quot; error and none of my other functions work.

Below is the code for the button that opens the menu. 

    function swapper() {
    toggleClass(document.getElementById(&#39;overlay&#39;), &#39;open&#39;);
    }

    var el = document.getElementById(&#39;overlayBtn&#39;);
    el.addEventListener(&#39;click&#39;, swapper, false);

    var text = document.getElementById(&#39;overlayBtn&#39;);
    text.onclick = function(){
    this.innerHTML = (this.innerHTML === &quot;Menu&quot;) ? &quot;Close&quot; : &quot;Menu&quot;;
    return false;
    };

How do I deal with this? I probably need to all wrap this code in another function or use an if/else statement so that it only searches for the id on specific pages, but not sure exactly. 

Cannot read property &#39;addEventListener&#39; of null

Does vue.js have a shorthand for `document.getElementById(&#39;#id&#39;)` like JQuery&#39;s `$(&#39;#id&#39;)`? 

If so, where is the reference for this in the docs so I can locate other information?


vue.js &#39;document.getElementById&#39; shorthand

How do I select certain bars in react.js?

This is my code:

    var Progressbar = React.createClass({
        getInitialState: function () {
            return { completed: this.props.completed };
        },
        addPrecent: function (value) {
            this.props.completed += value;
            this.setState({ completed: this.props.completed });
        },

        render: function () {

            var completed = this.props.completed;
            if (completed &lt; 0) { completed = 0 };


            return (...);
        }

I want to use this React component:

    var App = React.createClass({
        getInitialState: function () {

            return { baction: &#39;Progress1&#39; };
        },
        handleChange: function (e) {
            var value = e.target.value;
            console.log(value);
            this.setState({ baction: value });
        },
        handleClick10: function (e) {
            console.log(&#39;You clicked: &#39;, this.state.baction);
            document.getElementById(this.state.baction).addPrecent(10);
        },
        render: function () {
            return (
                &lt;div class=&quot;center&quot;&gt;Progress Bars Demo
                &lt;Progressbar completed={25} id=&quot;Progress1&quot; /&gt;
                    &lt;h2 class=&quot;center&quot;&gt;&lt;/h2&gt;
                    &lt;Progressbar completed={50} id=&quot;Progress2&quot; /&gt;
                    &lt;h2 class=&quot;center&quot;&gt;&lt;/h2&gt;
                    &lt;Progressbar completed={75} id=&quot;Progress3&quot; /&gt;
                    &lt;h2 class=&quot;center&quot;&gt;&lt;/h2&gt;
                    &lt;span&gt;
                        &lt;select name=&#39;selectbar&#39; id=&#39;selectbar&#39; value={this.state.baction} onChange={this.handleChange}&gt;
                            &lt;option value=&quot;Progress1&quot;&gt;#Progress1&lt;/option&gt;
                            &lt;option value=&quot;Progress2&quot;&gt;#Progress2&lt;/option&gt;
                            &lt;option value=&quot;Progress3&quot;&gt;#Progress3&lt;/option&gt;
                        &lt;/select&gt;
                        &lt;input type=&quot;button&quot; onClick={this.handleClick10} value=&quot;+10&quot; /&gt;
                        &lt;button&gt;+25&lt;/button&gt;
                        &lt;button&gt;-10&lt;/button&gt;
                        &lt;button&gt;-25&lt;/button&gt;
                    &lt;/span&gt;
                &lt;/div&gt;
            )
        }
    });

I want to execute the handleClick10 function and perform the operation for my selected progressbar.
But the result I get is:

     You clicked:  Progress1
     TypeError: document.getElementById(...) is null

How do I select the certain Element in react.js?

Content Type	Original Author	Original Content on Stackoverflow
Question	Sheena	View Question on Stackoverflow
Solution 1 - Javascript	cameronroe	View Answer on Stackoverflow
Solution 2 - Javascript	PanJanek	View Answer on Stackoverflow
Solution 3 - Javascript	Fabrizio Calderan	View Answer on Stackoverflow

getElementById returns null?

Javascript Problem Overview

Javascript Solutions

Solution 1 - Javascript

Solution 2 - Javascript

Solution 3 - Javascript

What is a callback in java

How can I change the default Visual Studio C# new class file template?

Attributions