在html页面中使用多个不同的js文件的问题

Question

I have two js file one is for car brands and another is for user location.我有两个 js 文件，一个用于汽车品牌，另一个用于用户位置。 I created a form and add both of them in same html page.我创建了一个表单并将它们添加到同一个 html 页面中。 But js file that is at last that work correctly and the above one don't.但是 js 文件最终可以正常工作，而上面的文件却没有。 Is there any solution or method to use both js file in same page.是否有任何解决方案或方法可以在同一页面中同时使用这两个 js 文件。 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>

Answer 1

Firstly I can see a simple mistake in your code.首先，我可以在您的代码中看到一个简单的错误。 You have two u's in populatebrand in the function definition.您在函数定义中的populatebrand中有两个 u。

I tested your code once fixing this and I then got the following error (from the brandmodel.js script):我在修复此问题后测试了您的代码，然后出现以下错误（来自brandmodel.js 脚本）：

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.发生此错误是因为在定义optionArray您已将某些字符串/元素拆分为新行。 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).我已经用这些更改测试了代码，现在可以识别两个脚本中的函数（即使它们位于单独的 js 文件中）。

在html页面中使用多个不同的js文件的问题

问题描述

1 个解决方案

解决方案1
2 2019-01-25 13:43:44

在html页面中使用多个不同的js文件的问题

问题描述

1 个解决方案

解决方案1 2 2019-01-25 13:43:44

解决方案1
2 2019-01-25 13:43:44