Страница скрипта не работает - PullRequest
Новая
       6

Страница скрипта не работает

0 голосов
/ 26 мая 2018

Почему скрипт ниже не работает?Файл JavaScript находится в другой папке, и моя функция работает только при вызове его через консоль. 

$('#myOptions').change(function() {
    var val = $("#myOptions option:selected").text();
    alert(val);
});
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Exos">
    <meta name="viewport" content="width=device-width", initial-scale="1">
    <link type="text/css" rel="stylesheet" href="css/exos.css">
    <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</head>
<body>
    <select id="myOptions">
        <option value='option1'>Gateway 1</option>
        <option value='option2'>Gateway 2</option>
        <option value='option3'>Gateway 3</option>
    </select>
</body>
</html>

Изображение моей папки:

enter image description here

Изображение внутри папки js:

enter image description here

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Вы должны переместить сценарии в конец вашей <body> или обернуть код в функцию $(document).ready.

0 голосов
/ 26 мая 2018

Поскольку вы пытаетесь выбрать элемент до того, как он появится на странице: 

$('#myOptions')

Оберните ваш код jQuery в обработчик document.ready, чтобы он выполнялся после полной загрузки DOM: 

$(function () {
    $('#myOptions').change(function() {
        var val = $("#myOptions option:selected").text();
        alert(val);
    });
});

И наоборот, вы можете переместить элементы скрипта вниз страницы, чтобы на них ссылались после целевых элементов DOM: 

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="Exos">
    <meta name="viewport" content="width=device-width", initial-scale="1">
    <link type="text/css" rel="stylesheet" href="css/exos.css">
</head>
<body>
    <select id="myOptions">
        <option value='option1'>Gateway 1</option>
        <option value='option2'>Gateway 2</option>
        <option value='option3'>Gateway 3</option>
    </select>
    <script type="text/javascript" src="js/jquery-3.3.1.slim.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
</body>
</html>
...