Проблема с Javascript src
Мой код JavaScript будет работать, если я помещу его в файл HTML в теги сценарий. Если я помещу код в отдельный файл .js, он не запустится.
Вот фиктивный файл, с которым я играл. Код, который работает:
<head>
<link rel = "stylesheet" href = "TabStyle.css">
</head>
<body>
<script>
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
</script>
<!-- Tab links -->
<div class = "tab">
<button class = "tablinks" onclick = "openCity(event, 'London')">London</button>
<button class = "tablinks" onclick = "openCity(event, 'Paris')">Paris</button>
<button class = "tablinks" onclick = "openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id = "London" class = "tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id = "Paris" class = "tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id = "Tokyo" class = "tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
Код, который не работает:
<head>
<link rel = "stylesheet" href = "TabStyle.css">
</head>
<body>
<script src = "TabJS.js"></script>
<!-- Tab links -->
<div class = "tab">
<button class = "tablinks" onclick = "openCity(event, 'London')">London</button>
<button class = "tablinks" onclick = "openCity(event, 'Paris')">Paris</button>
<button class = "tablinks" onclick = "openCity(event, 'Tokyo')">Tokyo</button>
</div>
<!-- Tab content -->
<div id = "London" class = "tabcontent">
<h3>London</h3>
<p>London is the capital city of England.</p>
</div>
<div id = "Paris" class = "tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id = "Tokyo" class = "tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
Не могли бы вы проверить инструменты разработчика вашего браузера? В частности, вкладка сети, чтобы убедиться, что скрипт загружен, и вкладка консоли, чтобы увидеть, возникли ли какие-либо ошибки скрипта.
В TabJS.js есть теги <script>?
@RobinZigmond Может быть заблокирован и HTTP-запрос.
В зависимости от вашего браузера может случиться так, что DOM еще не отображается при выполнении кода ...
если ваш src не ошибочен (путь действителен), вам нужно будет поместить тег скрипта непосредственно перед </body> или добавить прослушиватель событий загрузки в документ или окно.
В файле TabJS.js нет тегов скрипта. Должно быть ?? Все, что я прочитал, говорит нет
Нет, но я хотел посмотреть, есть ли они у тебя там
Я получаю консольную ошибку. Ошибка загрузки для <script> с источником «c: \ Users \ PROD \ Desktop \ html \ TabJS.js». tabtest.html: 33
Попробуйте stackoverflow.com/questions/11996257/…
@HarrisShapiro - это путь к файлу - "путь", который вы указываете веб-ресурсу, должен быть URL-адресом, который его обслуживает.
Значит, ваш HTML-код находится в C: \ Users \ PROD \ Desktop \ html \ tabtest.html? (То же место, что и TabStyle.css?) В этом случае вам нужен просто src = "TabJS.js", а не полный путь. Но нет веских причин, по которым полный путь не должен работать - я думаю, что современные браузеры довольны путями C: \, а также путями file: //.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я воспроизвел ваш пример, и все работает как задумано. Вот снимок экрана, на котором показаны файлы, структурированные в папке, и вывод в браузере:
Вероятно, вы неправильно разместили свои файлы или ссылка на код неверна.
Проверьте следующее:
- файлы находятся в одной папке
- ссылка на файл JS выглядит следующим образом:
<script src = "TabJS.js"></script> - без тегов в файле JS, только чистый JavaScript
Кроме того, возникают ли у вас ошибки в консоли браузера (Инструменты разработчика)?
Привет, в медленные дни я страдаю от того, что забываю сделать все следующее, может быть, это то же самое для тебя !? Убедитесь, что вы используете последнюю версию Chrome. Убедитесь, что у вас включены Инструменты разработчика. Наведите указатель мыши на перезагрузку и выберите «Очистить кеш и жесткую перезагрузку», затем просмотрите, что происходит, и в случае ошибки в консоли справа внизу должен быть указатель.
Проверьте свой путь к файлу - это единственная причина, по которой это не сработает