Как мне заставить этот раздел javascript работать
Я создаю макет веб-сайта, используя HTML, Javascript и CSS. Я хочу перейти с одной страницы на другую (с home.html на TVShows.html), нажав на список «Телешоу» на панели навигации. Обычно я просто назначаю href, но вместо этого я хочу закодировать это взаимодействие с помощью Javascript. Вот моя попытка, но она не работает. HTML:
<li><a id = "TVShows" href = "#">TV
Shows</a></li>
Javascript:
// Function to handle navigation to TV Shows page
document.getElementById('TVShows').addEventListener('click', function(event) {
event.preventDefault(); // prevent default link behavior
console.info("TV Shows link clicked");
// Redirect to TV Shows page
window.location.href = 'TVShows.html';
});
Я пробовал разные способы написания, но ни один из них не сработал.
Я подтвердил, что имена и метки верны.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
<!doctype html>
<li><a id = "TVShows" href = "#">TV
Shows</a></li>
<script>
// Function to handle navigation to TV Shows page
document.getElementById('TVShows').addEventListener('click', function(event) {
event.preventDefault(); // prevent default link behavior
console.info("TV Shows link clicked");
// Redirect to TV Shows page
window.location.href = 'TVShows.html';
});
</script>
Эта отдельная страница работает. Значит, ошибка где-то в другом месте, в каком-то другом коде, который вы нам не показали.
Я нашел проблему. Я использовал один файл javascript для всех страниц и вызывал один и тот же .js src для каждого html-файла. Похоже, вам нужны отдельные файлы .js для каждого html или напишите скрипт прямо в html. Спасибо
Обычно работает один общий файл. Бывают случаи, когда это может не произойти, возможно, по какой-то другой причине или из-за того, что различные функции в сценарии каким-то образом конфликтуют. Однако, как правило, это должно работать.
Я так и предполагал, но в данном случае не знаю, почему этого не произошло. Я убедился, что ничего не противоречит
убедитесь, что ваш скрипт находится в конце вашего html-файла, иначе элемент может еще не существовать (поскольку он не загружен), или вы также можете использовать это:
document.addEventListener('DOMContentLoaded', function() {
var tvShowsLink = document.getElementById('TVShows');
tvShowsLink.addEventListener('click', function(event) {
event.preventDefault();
console.info("TV Shows link clicked");
window.location.href = 'TVShows.html';
});
});
Я нашел проблему. Я использовал один файл javascript для всех страниц и вызывал один и тот же .js src для каждого html-файла. Похоже, вам нужны отдельные файлы .js для каждого html или напишите скрипт прямо в html.
У меня работает, а это говорит о том, что ошибка где-то в другом месте.