JS working in <script> tag but not in .js file

Question

When combined like this, it works

<form name="classic">
    <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
        <option selected>thing</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>

    </select>

    <select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
    </select>
</form>

<script type="text/javascript">

    var countrieslist = document.classic.countries
    var citieslist = document.classic.cities

    var cities = new Array()
    cities[0] = ""
    cities[1] = ["1.1|gvhj", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
    cities[2] = ["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
    cities[3] = ["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
    cities[4] = ["4.1|4.1"]

    function updatecities(selectedcitygroup) {
        citieslist.options.length = 0
        if (selectedcitygroup > 0) {
            for (i = 0; i < cities[selectedcitygroup].length; i++)
                citieslist.options[citieslist.options.length] = new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
        }
    }

</script>

But when separated into a .html and .js file, it doesn't. Why?

3lev.html:

<html>
    <head>
        <meta charset="utf-8"/>
        <title>3lev</title>
        <script src="3lev.js"></script>
    </head>
    <body>
        <form name="classic">
            <select name="countries" size="4" onChange="updatecities(this.selectedIndex)" style="width: 150px">
            <option selected>thing</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>

            </select>

            <select name="cities" size="4" style="width: 150px" onClick="alert(this.options[this.options.selectedIndex].value)">
            </select>
        </form>
    </body>
</html>

3lev.js:

var countrieslist=document.classic.countries
var citieslist=document.classic.cities

var cities=new Array()
cities[0]=""
cities[1]=["1.1|1.1", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2]=["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3]=["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4]=["4.1|4.1"]

function updatecities(selectedcitygroup){
    citieslist.options.length=0
    if (selectedcitygroup>0){
        for (i=0; i<cities[selectedcitygroup].length; i++)
            citieslist.options[citieslist.options.length]=new Option(cities[selectedcitygroup][i].split("|")[0], cities[selectedcitygroup][i].split("|")[1])
    }
}

The file is properly linked and the code is directly copied and pasted, so I can't see why wouldn't it work.
I don't know why it keeps making me add details, it's literally all I've got. I've given everything related that I could.

How do you know it's properly linked? What does your folder structure look like? — suuuriam
– suuuriam, Commented May 18, 2020 at 11:58
In your js file, try putting all of the code within: document.addEventListener("DOMContentLoaded", function() { /* YOUR CODE HERE */ }). The code will be executed after the pae is loaded. — lurker
– lurker, Commented May 18, 2020 at 12:01
You're trying to access the form before it exists. Folder structure is irrelevant. — Guy Incognito
– Guy Incognito, Commented May 18, 2020 at 12:30

Kashinath Patekar · Accepted Answer · 2020-05-18 13:02:42Z

2

Add the defer attribute to the script tag

<script src="3lev.js" defer></script>

Or you can include the script tag just before the </body>closing tag intead of putting within head tag.

       </form>
       <script src="3lev.js"></script>
    </body>
</html>

This will make the browser execute script only after DOM content has been loaded.

edited May 18, 2020 at 13:02

answered May 18, 2020 at 12:53

Kashinath Patekar

1,14310 silver badges23 bronze badges

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

Comments

Rishu Ranjan · Accepted Answer · 2020-05-18 12:37:40Z

0

You need to use window.onload event of the javascript to make sure all the DOM content is loaded before javascript starts executing.

Below is the working code snippet:

window.onload=function(){
   countrieslist=document.classic.countries
   citieslist=document.classic.cities
  };
var countrieslist,citieslist;
var cities=new Array() cities[0]=""
cities[1]=["1.1|1.1", "1.2|1.2", "1.3|1.3", "1.4|1.4", "1.5|1.5"]
cities[2]=["2.1|2.1", "2.2|2.2", "2.3|2.3", "2.4|2.4"]
cities[3]=["3.1|3.1", "3.2|3.2", "3.3|3.3", "3.4|3.4"]
cities[4]=["4.1|4.1"];

function updatecities(selectedcitygroup){
    citieslist.options.length=0
    if (selectedcitygroup>0){
        for (i=0; i<cities[selectedcitygroup].length; i++)
              citieslist.options[citieslist.options.length]=new 
              Option(cities[selectedcitygroup][i].split("|")[0], 
              cities[selectedcitygroup][i].split("|")[1])
           }
      }
   }

edited May 18, 2020 at 12:37

answered May 18, 2020 at 12:32

Rishu Ranjan

5944 silver badges8 bronze badges

1 Comment

ThePueblo Over a year ago

Or You could, in this case, put link to JS file at the end of the body.

Collectives™ on Stack Overflow

JS working in <script> tag but not in .js file

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related