Problem in using multiple different js files in html page

Question

I have two js file one is for car brands and another is for user location. I created a form and add both of them in same html page. But js file that is at last that work correctly and the above one don't. Is there any solution or method to use both js file in same page. so they both work correctly. Thanks

function populatelocation(p1,c1){
var p1=document.getElementById(p1);
var c1=document.getElementById(c1);
c1.innerHTML="";
if (p1.value == "Azad Kashmir")
{
    var optionArray = ["|Select Location",
    "athmuqam|Athmuqam","bagh|Bagh","bhimber|Bhimber",
    "forward Kahuta|Forward Kahuta"];
}
else if (p1.value == "Balochistan")
{
    var optionArray = ["|Select Location",
    "awaran|Awaran","barkhan|Barkhan","chagai|Chagai",
    "dera Bugti|Dera Bugti","duki|Duki","gwadar|Gwadar","harnai|Harnai"];
}   
for (var option in optionArray)
{
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value=pair[0];
newOption.innerHTML=pair[1];
c1.options.add(newOption);
}
}

function popuulatebrand(b1,m1){
 var b1=document.getElementById(b1);
 var m1=document.getElementById(m1);
 m1.innerHTML="";
 if (b1.value == "Audi")
 {
 var optionArray =  ['|Select Model 
 *',"A1|A1","A2|A2","TTS|TTS",'Other|Other'];
 }
 else if (b1.value == "BMW")
 {
 var optionArray = ["|Select Model","F06 06 
 SERIES|F06 06 SERIES","G02 X4|G02 X4",
 "G29 Z4|G29 Z4","G20 3 SERIES|G20 3 SERIES",
 "I01 I3|I01 I3","I12 I8|I12 I8",'Other|Other'];
  } 
  else if (b1.value == "Other")
  {
  var optionArray = ['other|Other'];
  }
  for (var option in optionArray){
 var pair = optionArray[option].split("|");
 var newOption = document.createElement("option");
 newOption.value=pair[0];
 newOption.innerHTML=pair[1];
 m1.options.add(newOption);
 }
 }

<script src="js/location.js" type="text/javascript"></script>
<script src="js/brandmodel.js" type="text/javascript"></script>
 <body>
  <div>
    <select  class="form-control " id="brand" name="brand" onchange="populatebrand(this.id,'model')">
          <option value="">Choose...</option>
                    <option value="Audi" >Audi</option>
                    <option value="BMW" >BMW</option>
     </select>
    <select class="form-control" id="model">
           <option value="" >Choose...</option>
    </select>
   </div>
    <div>
    <select class="form-control" name="province" id="province" onchange="populatelocation(this.id,'city')">
          <option value="">Choose Province...</option>
                <option value="Azad Kashmir">Azad kashmir</option>
                 <option value="Balochistan">Balochistan</option>
     </select>
     <select class="form-control" name="city" id="city">
                <option>Choose Location...</option>
     </select>
    </div>
    </body>

Include relevant code in your question only, how you calling the file in HTML file etc. — Jaydip Nimavat
– Jaydip Nimavat, Commented Jan 25, 2019 at 11:53
Please read minimal reproducible example and Introducing Runnable JavaScript, CSS, and HTML Code Snippets — Quentin
– Quentin, Commented Jan 25, 2019 at 11:58
Hello Muhammad :) You have a typo in your populatebrand function definition. You have two u's instead of one here: function popuulatebrand(b1,m1){...} .. — Sarah
– Sarah, Commented Jan 25, 2019 at 13:22

Sarah · Accepted Answer · 2019-01-25 13:43:44Z

Firstly I can see a simple mistake in your code. You have two u's in populatebrand in the function definition.

I tested your code once fixing this and I then got the following error (from the brandmodel.js script):

SyntaxError: Invalid or unexpected token

This error is happening because when you are defining the optionArray you have split up some of your strings/elements to new lines. You should finish your strings on the same line.

Your code is as follows:

var optionArray = ['|Select Model 
 *',"A1|A1","A2|A2","TTS|TTS",'Other|Other'];

With these corrections your function would look like this:

function populatebrand(b1,m1){
  var b1=document.getElementById(b1);
  var m1=document.getElementById(m1);
  m1.innerHTML="";
  if (b1.value == "Audi")
  {
    var optionArray =  ['|Select Model*',"A1|A1","A2|A2","TTS|TTS",'Other|Other'];
  }
  else if (b1.value == "BMW")
  {
    var optionArray = ["|Select Model","F06 06 SERIES|F06 06 SERIES","G02 X4|G02 X4",
  "G29 Z4|G29 Z4","G20 3 SERIES|G20 3 SERIES",
  "I01 I3|I01 I3","I12 I8|I12 I8",'Other|Other'];
  } 
  else if (b1.value == "Other")
  {
    var optionArray = ['other|Other'];
  }
  for (var option in optionArray){
    var pair = optionArray[option].split("|");
    var newOption = document.createElement("option");
    newOption.value=pair[0];
    newOption.innerHTML=pair[1];
    m1.options.add(newOption);
  }
}

I have tested the code with these changes and the functions in both scripts are being recognised now (even when they are in separate js files).

Collectives™ on Stack Overflow

Problem in using multiple different js files in html page

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related