Локальный связанный файл Javascript не работает - PullRequest
Новая
       7

Локальный связанный файл Javascript не работает

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

У меня возникли проблемы с получением javascript для ссылки в файл HTML. Внешняя ссылка работает нормально, но мне нужно сделать несколько настроек и ссылку из папки на моем компьютере. Я полностью в замешательстве, я понятия не имею, почему я могу ссылаться на внешний файл js, а не один с моего компьютера.

У меня есть два идентичных файла Javascript, но в разных папках: 

myWebsite/materialize.min.js
myWebsite/materialize/js/materialize.min.js

Моя структура файлов выглядит следующим образом (я работаю над "materialui.html") 

myWebsite/
    |
    |- materialui.html
    |- materialize.min.js
    |
    |- materialize/
            |- css/
            |- fonts/
            |- js/
                    |- materialize.min.js
                    |- materialize.js

Я попытался создать ссылку на локальный файл .js, используя следующие методы: 

//This one works:
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script> 

//None of these work
<script src="materialize/js/materialize.min.js"></script>
<script src="materialize.min.js" ></script>
<script src="materialize/js/materialize.min.js" type="text/javascript"></script>
<script src="materialize.min.js" type="text/javascript"></script>
<script type="text/javascript" src="materialize/js/materialize.min.js"></script>
<script type="text/javascript" src="materialize.min.js"></script>

//And I have also tried pasting the entire code into the script tag. No luck.

Вот код для "materialui.html" 

<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <!-- Compiled and minified JavaScript-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 

        <!-- This one works -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>

        <!-- These do not -->
        <script type="text/javascript" src="materialize/js/materialize.min.js"></script>
        <script type="text/javascript" src="materialize.min.js" ></script>

    <!--Let browser know website is optimized for mobile-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body> 

<div class="container">
    <div id="t" class="chips chips-initial"></div>
    <div class="chips chips-placeholder"></div>

    <script>
    //$(document).ready(function(e) { ]);

        //$('.chips').material_chip();
        $('.chips-initial').material_chip({
            data: [{
                tag: 'Apple',
            }, {
                tag: 'Banana',
            }, {
                tag: 'Mango',
            }],
        });

        $('.chips-placeholder').material_chip({
            placeholder: 'Enter tag Name',
            secondaryPlaceholder: '+Tag',
        });

        $('.chips').on('chip.add', function(e, chip){
            var data= $('#t').material_chip('data');
            var l = data.length;
            var i;
            $(".chips-initial input").val('lll');
            for (i = 0; i < l; i++) { 
                //if (data[i].tag[0] = "#") {
                    //alert(data[i].innerHTML);
                    data[i].delete;
                //}
            }
        });


    </script>   

</div>

</body>
</html>

Я прочитал это:
Невозможно прикрепить локальный файл Javascript к HTML
JavaScript не связан с HTML-файлом
Файл Javascript не связан с html
Путь к файлу Javascript неверно связан
Javascript внешний файл неправильно связывается
и старый
https://www.w3schools.com/html/html_filepaths.asp на случай, если я просто пропустил что-то

Ответы [ 2 ]

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

Я выяснил это По какой-то причине мне пришлось поменять сценарий внизу. Я не знаю почему, но сейчас это работает. 

<!DOCTYPE html>
<html>
<head>
    <!--Import Google Icon Font-->
    <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <!--Import materialize.css-->
    <!-- Compiled and minified CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
    <!-- Compiled and minified JavaScript-->
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <!--Let browser know website is optimized for mobile-->
    <script type="text/javascript" src="./materialize/js/materialize.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

</head>

<body> 

    <div class="container">
        <div class="chips chips-initial"></div>
    </div>

    <script>

        $(document).ready(function(e) { 

            $('.chips-initial').chips({
            data: [{
                    tag: 'Apple',
                }, {
                    tag: 'Microsoft',
                }, {
                    tag: 'Google',
                }],
            });

        });

    </script>   

    <script>
        M.AutoInit();
    </script>

</body>
</html>
0 голосов
/ 02 мая 2018

Получаете ли вы 404 в консоли? Я бы предложил отредактировать вашу первую ссылку js на следующую и удалить вторую. Надеюсь, это работает для вас. 

 <!-- These do not -->
    <script type="text/javascript" src="./materialize/js/materialize.min.js"></script>
...