Как внешний JavaScript в HTML и CSS
вот код HTML, включая JS и я хочу, чтобы JS был внешним файлом, но он не будет работать, как его решить и заставить элемент двигаться при нажатии, когда он внешний
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
34
2
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 2
Вам нужно поместить теги script после элементов (перед </body>) или обернуть в обработчик загрузки:
window.addEventListener("DOMContentLoaded", function() {
var acc = document.getElementsByClassName("accordion");
.....
})
Также вы, вероятно, захотите делегировать из контейнера аккордеона вместо цикла
document.getElementById("accordionContainer").addEventListener("click", function(e) {
const tgt = e.target.closest(".accordion");
if (tgt) tgt.classList.toggle("active");
tgt.nextElementSibling.classList.toggle("hide", !tgt.classList.contains("active"));
})
Ответ принят как подходящий
если вы хотите использовать внешний JS-файл внутри вашего html-файла затем вам нужно поместить тег script в заголовок html-файла
<head>
<script src = "file.js" defer></script>
</head>Другие вопросы по теме
Можете ли вы получить содержимое файла github с помощью javascript?
Почему text-overflow не работает внутри вложенного flex-box?
Как использовать ввод тегов Bootstrap
Как сместить DIV по его индексу
Динамическая передача href в теге привязки
Скачать файл в Webview
Ширина контейнера не регулируется автоматически в зависимости от содержимого внутри
Очистить локальную дату и время с обязательным
Меню аккордеонов, странный синтаксис
Почему не все мои анимированные рамки анимируются?
Похожие вопросы
Работа с несколькими необязательными аргументами в функции javascript
Можете ли вы получить содержимое файла github с помощью javascript?
Почему <> выдает SyntaxError: неожиданный токен в моем файле React .js
Как предотвратить соответствие следующего регулярного выражения эллипсам?
Nest Js - Как сгенерировать файл и отправить его в качестве ответа на запрос, не сохраняя файл локально?
Показывать модальное окно вместо консольного
Как сместить DIV по его индексу
Динамическая передача href в теге привязки
Как я могу сравнить данные базы данных Firebase в реальном времени (дочерние значения)
Скачать файл в Webview
Пожалуйста, посетите центр помощи, возьмите тур, чтобы увидеть, что и Как спросить. Если вы застряли, опубликуйте минимальный воспроизводимый пример вашей попытки, отметив ввод и ожидаемый вывод с помощью редактора фрагментов [<>].