timothy5597
timothy5597

Reputation: 13

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

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.

Upvotes: 0

Views: 957

Answers (2)

Kashinath Patekar
Kashinath Patekar

Reputation: 1143

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.

Upvotes: 2

Rishu Ranjan
Rishu Ranjan

Reputation: 574

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])
           }
      }
   }

Upvotes: 0

Related Questions