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>
1 answers
solution1
2 2019-01-25 13:43:44
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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.