What is wrong with my JavaScript script code here? [duplicate]

Question

JavaScript code:

   <script type="text/javascript">
                var listitems = document.getElementsByTagName('ul')[0];
                var newListItem = document.createElement('li');
                var newListItemText = document.createTextNode('Tutorials');
                newListItem.appendChild(newListItemText);
                listitems.appendChild(newListItem);

            </script>

HTML Code:

        <body>
        <div class="2div">
        <div id="navigator">
            <nav >
                <ul class="nav_menu">
                    <li><a href="/homepage.html">Home</a></li>
                    <li><a href="/Projects.html">Projects</a></li>
                    <li><a href="/Contact.html">Contact Info</a></li>
                </ul>
            </nav>
        </div>

        <div id="aboutme">
            <body>
                <p> This section will contain basic info about me</p>
            </body>
        </div>


    </div>

The error I'm receiving on my chrome console is this:

Uncaught TypeError: Cannot read property 'appendChild' of undefined

Sounds like you are trying to find the element before it is on the page. — epascarello
– epascarello, Commented Jul 29, 2015 at 19:37
Check listitems if is undefined before to use it. Log it and you see that it's undefined. — alifirat
– alifirat, Commented Jul 29, 2015 at 19:38
Is your Javascript located above or below the HTML? It needs to be below so that the ul tag will exist. — David
– David, Commented Jul 29, 2015 at 19:39
The HTML you added doesn't contain ul element. Please edit your question if it wasn't your purpose — Eyal Ofri
– Eyal Ofri, Commented Jul 29, 2015 at 19:39
wow i understand. So i should start the script with $(document).ready(function... ) then? I kept searching if the appendChild() has been depreciated but it is still used. So the script should actually occur after the list has been created. — Ali Aslam
– Ali Aslam, Commented Jul 29, 2015 at 19:45

alifirat · Accepted Answer · 2015-07-29 19:42:11Z

0

Just add the onload function because you are working on HTML elements which are not in the DOM yet :

window.onload = function foo() {

var listitems = document.getElementsByTagName('ul')[0];
                var newListItem = document.createElement('li');
                var newListItemText = document.createTextNode('Tutorials');
                newListItem.appendChild(newListItemText);
                listitems.appendChild(newListItem);

}

See the result here : https://jsfiddle.net/vdf61qnw/

answered Jul 29, 2015 at 19:42

alifirat

2,9671 gold badge19 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eyal Ofri · Accepted Answer · 2015-07-29 19:43:23Z

0

Your probably loading the js file before the HTML so the ul element wasn't rendered yet.

You can use jQuery's $(document).ready(function(){..Your code}) to fix it.

answered Jul 29, 2015 at 19:43

Eyal Ofri

70810 silver badges16 bronze badges

Comments

john · Accepted Answer · 2015-07-29 19:44:19Z

0

There is no 'ul' in your html so

document.getElementsByTagName('ul')[0] == null

Therefore listitems is null and cannot be appended to. This should append your JavaScript created elements:

   <script type="text/javascript">
            var body = document.getElementsByTagName('body');
            var listitems = document.createElement('ul');
            var newListItem = document.createElement('li');
            var newListItemText = document.createTextNode('Tutorials');
            newListItem.appendChild(newListItemText);
            listitems.appendChild(newListItem);
            body.appendChild(listitems);
   </script>

answered Jul 29, 2015 at 19:44

john

12 bronze badges

Collectives™ on Stack Overflow

What is wrong with my JavaScript script code here? [duplicate]

3 Answers 3

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Linked

Related