external javascript not reading variables

Question

Can someone help me with this one?

Basically, my external javascript file is not reading my variable list. It is reading the document. title call above, and when I literally cut and paste the code into an internal javascript file it reads fine so I'm stumped.

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <script src="main.js" type="text/javascript" ></script>
</head>
<body>
    <h1 id="ourheadline">Click this to replace text</h1>
    <button>Add new item</button>

    <ul id="our-list">
        <li>1st item</li>
        <li>2nd item</li>
        <li>3rd item</li>
        <li>4th item</li>
    </ul>
</body>

<script>
   var listBoxes = document.getElementById("our-list").getElementsByTagName("li");
    </script>

</html>

and the javascript

document.title = "This is a latest newset text";

var listBoxes = document.getElementById("our-list").getElementsByTagName("li");

Like I say the document.title reads fine but the list doesn't read at all it just returns as undefined in the console any help would be greatly appreciated

This has nothing to do with the JS being in an external file. It has everything to do with you *moving the ` — Quentin, Oct 05 '18 at 07:14
to extend Quentin's comment, your page code is read sequentially from top to bottom, an external script is executed when the ` — Kaddath, Oct 05 '18 at 07:17

score 0 · Answer 1 · answered Oct 05 '18 at 07:12

Wrap your code inside document or window load to access elements

window.onload=function(){
 var listBoxes = document.getElementById("our-list").getElementsByTagName("li");
}

in Jquery

$(document).ready(function(){
var listBoxes = document.getElementById("our-list").getElementsByTagName("li");

});

external javascript not reading variables

1 Answers1