Блог

Главная - Вопросы по программированию - Не удается вызвать функцию JavaScript, расположенную в файле и папке, отличных от файла HTML, для выбора опции

Не удается вызвать функцию JavaScript, расположенную в файле и папке, отличных от файла HTML, для выбора опции

#javascript #html #eclipse #jsp #web-inf

Вопрос:

Привет всем, у меня есть следующая структура проекта веб-приложения

введите описание изображения здесь

И мой classregister.html следует вызывать мои функции в файле «скрипты». Однако я не думаю, что он делает это, так как я не могу выбрать из своего второго выпадающего списка. Это работает, хотя, если у меня есть функция в том же файле, использующая или jsfiddle. Пожалуйста, где я ошибаюсь?

calssregister.html:

 <!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<link rel="stylesheet" href="styles/style.css" type="text/css" />
</head>
<body>
    <form id="classregister" action="#" method="post">

        <div>
            <p>
                <label class="category_div" id="category_div">Please select
                    Style: 
                    <select name="category" class="required-entry" id="category"
                    onchange="return dynamicdropdown()">
                        <option value="">Select Style</option>
                        <option value="X">X</option>
                        <option value="Y">Y</option>
                        <option value="Z">Z</option>
                        <option value="A">A</option>
                </select>
                </label>
            </p>
            <p>
                <label class="sub_category_div" id="sub_category_div">Please
                    select your Level: <select name="subcategory" id="subcategory"
                    onchange="return dynamicdropdownone()">
                        <option value="">Please select your Level</option>
                </select>
                </label>
            </p>

            <p>
                <label class="sub_subcategory_div" id="sub_subcategory_div">Please
                    select Dance Class: <select name="sub_subcategory"
                    id="sub_subcategory" multiple>
                        <option value="">Please select a Dance Class</option>
                </select>
                </label>
            </p>
        </div>

    </form>
    <script src="scripts/myfunctions.js"></script>
</body>
</html>

myfunctions.js выглядит так:

 function dynamicdropdown() {
  var e = document.getElementById("category");
  var listindex = e.options[e.selectedIndex].value;
  //listindex = this.options[this.selectedIndex].value;
  document.getElementById("sub_subcategory").length = 0;
  document.getElementById("sub_subcategory").options[0] = new Option("Please select your Level", "");
  document.getElementById("subcategory").length = 0;
  switch (listindex) {
    case "X":
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      document.getElementById("subcategory").options[1] = new Option("Beginner", "X_Beginner");
      document.getElementById("subcategory").options[2] = new Option("Intermediate", "X_Intermediate");
      break;

    case "Y":
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      document.getElementById("subcategory").options[1] = new Option("Beginner", "Y_Beginner");
      document.getElementById("subcategory").options[2] = new Option("Intermediate", "Y_Intermediate");
      break;
    case "Z":
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      document.getElementById("subcategory").options[1] = new Option("Beginner", "Z_Beginner");
      document.getElementById("subcategory").options[2] = new Option("Intermediate", "Z_Intermediate");
      break;
    case "A":
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      document.getElementById("subcategory").options[1] = new Option("Beginner", "A_Beginner");
      document.getElementById("subcategory").options[2] = new Option("Intermediate", "A_Intermediate");
      break;
    default:
      document.getElementById("subcategory").options[0] = new Option("Please select Level", "");
      break;
  }
  return true;
}

function dynamicdropdownone() {
  var e = document.getElementById("subcategory");
  var listindex = e.options[e.selectedIndex].value;

  var selector = document.getElementById("sub_subcategory");

  document.getElementById("sub_subcategory").length = 0;
  switch (listindex) {
    case "X_Beginner":
      var monday = 1;
      var mondays = getSpecificDayInAMonth(monday).length;


      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
      for (var i = 1; i < mondays; i  ) {
        selector.options[i] = new Option(getSpecificDayInAMonth(monday)[i]   " 19:00-20:00 ", "monday_1900_2000");
        selector.options[i] = new Option(getSpecificDayInAMonth(monday)[i]   " 20:00-21:00 ", "monday_2000_2100");
      }

      break;

    case "X_Intermediate":
      var wednesday = 3;
      var wednesdays = getSpecificDayInAMonth(wednesday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
      for (var i = 1; i < wednesdays; i  ) {
        selector.options[i] = new Option(getSpecificDayInAMonth(wednesday)[i]   " 19:00-20:30 ", "wednesday_1900_2030");
      }
      break;
    case "Y_Beginner":
      var thursday = 4;
      var thursdays = getSpecificDayInAMonth(thursday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < thursdays; i  ) {
        selector.options[i] = new Option(getSpecificDayInAMonth(thursday)[i]   " 19:00-20:00 ", "thursday_1900_2000");
      }
      break;

    case "Y_Intermediate":
      var thursday = 4;
      var thursdays = getSpecificDayInAMonth(thursday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < thursdays; i  ) {
        selector.options[i] = new Option(getSpecificDayInAMonth(thursday)[i]   " 20:00-21:00 ", "thursday_2000_2100");
      }
      break;

    case "Z_Beginner":
      var tuesday = 4;
      var tuesdays = getSpecificDayInAMonth(tuesday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < tuesdays; i  ) {
        selector.options[i] = new Option(getSpecificDayInAMonth(tuesday)[i]   " 19:00-20:00 ", "tuesday_1900_2000");
      }
      break;

    case "Z_Intermediate":
      var tuesday = 2;
      var tuesdays = getSpecificDayInAMonth(tuesday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < tuesdays; i  ) {
        selector.options[i] = new Option(getSpecificDayInAMonth(tuesday)[i]   " 20:00-21:00 ", "tuesday_2000_2100");
      }
      break;

    case "A_Beginner":
      var friday = 5;
      var fridays = getSpecificDayInAMonth(friday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < fridays; i  ) {
        selector.options[i] = new Option(getSpecificDayInAMonth(friday)[i]   " 19:00-20:00 ", "friday_1900_2000");
      }
      break;

    case "A_Intermediate":
      var friday = 4;
      var fridays = getSpecificDayInAMonth(friday).length;
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");

      for (var i = 1; i < fridays; i  ) {
        selector.options[i] = new Option(getSpecificDayInAMonth(friday)[i]   " 20:00-21:00 ", "friday_2000_2100");
      }
      break;
    default:
      document.getElementById("sub_subcategory").options[0] = new Option("Please select ", "");
      break;
  }
  return true;
}

Комментарии:

1. Разве идентификатор не должен быть либо <script src="../scripts/myfunctions.js"> или <script src="/scripts/myfunctions.js"> вместо <script src="scripts/myfunctions.js"> ? Папка «скрипты» находится не в той папке, где находится HTML-файл.

2. @secan попробовал ваше предложение, но проблема остается

Ответ №1:

Я понял, где я ошибся. Итак, прежде всего синтаксис и позиционирование

 <script src="scripts/myfunctions.js"></script>

был прав. Однако мне не следовало использовать

 onchange="return dynamicdropdownone()"

но

 onchange="dynamicdropdownone()"

при вызове функций.

Ответ №2:

scripts/myfunction.js это относительный путь, поэтому он думает, что он будет находиться в том же каталоге, в котором будет находиться HTML-файл. Вместо <script src="scripts/myfunctions.js"></script>

Попробуй <script src="http://domain.here/scripts/myfunctions.js"></script> .

Метки: , , ,