Код VS: файл HTML не извлекает функции из прикрепленного javascript
Выполняю базовую практику/тестирование для проекта, над которым я работаю, и не могу получить доступ к своему html-файлу для доступа к функциям, написанным в прикрепленном файле javascript. Я чувствую, что есть что-то сверхъестественное, чего мне не хватает, но я не могу указать на это.
Базовую кнопку я вытащил отсюда: Создание кнопки ВКЛ/ВЫКЛ с помощью javascript И я пробовал решения здесь: Файл HTML не извлекает информацию из файла javascript
Мой HTML:
<!DOCTYPE html>
<head>
<script type = "text/javascript" src = "app.js"></script>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<input type = "button" value = "X" id = "turn" onclick = "turn();">
</body>
</html>
Мои JS:
function turn(){
currentvalue = document.getElementById('turn').value;
if (currentvalue == "X"){
document.getElementById("turn").value = "O";
}
else{
document.getElementById("turn").value = "X";
}
}
Сама функция работает, когда она встроена в тег script внутри <body>, но не при извлечении из прикрепленного файла javascript. Что мне не хватает?
@ Энди, но функция, скорее всего, не запустится до тех пор, пока документ не будет загружен, поскольку она запускается щелчком пользователя, поэтому к тому времени document должен был быть готов.
@Энди Пробовал все три из них и, к сожалению, не сработал. Пробовал размещать скрипт прямо над <body>, сверху внутри него и внизу внутри него. Затем попробовал использовать defer в теге script, а также добавил window.addEventListener... etc в javascript, и все равно ничего.
Не ответ на ваш вопрос, почему трижды попал в DOM? это может быть просто function turn() { let myTurn = document.getElementById('turn'); myTurn.value = myTurn.value == "X" ? "O" : "X"; }
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы должны использовать тег <script> в теле.
<!DOCTYPE html>
<html lang = "en">
<head> </head>
<body>
<input type = "button" value = "X" id = "turn" onclick = "turn();" />
<script src = "app.js"></script>
</body>
</html>
Для резюме: современный подход к старому подходу
- Вы можете использовать
module, которые по умолчанию отмеченыdefer<script type = "module" src = "/app.js"></script> - Вы можете использовать
defer, чтобы убедиться, что ваш js выполняется после загрузки страницы, т.е.<script src=app.js" defer></script> - Вы можете поставить свой тег
<script>перед закрытием тега</body>body
Для получения более подробной информации вы можете посмотреть этот отличный ответ.
К сожалению, пробовал и это, и все равно ничего :(
Выше работает на моей машине.
После редактирования: Пробовал модуль изначально и, к сожалению, тоже не сработал. Ни отложить, ни изменить положение моего тега <script>.
Вы можете использовать эта ссылка, чтобы продолжить обучение. Я снова отредактировал ответ, похоже, у вас не был открыт тег <html>, возможно, это причина ошибки.
Похоже, проблема заключалась в том, что я случайно оставил строку window.addEventListener('DOMContentLoaded', fn); в своем javascript, одновременно пробуя этот метод, и это вызывало проблему. Удаление его и добавление defer в мой тег <script> каким-то образом исправило это. Спасибо!
function turn(){
currentvalue = document.getElementById('turn').value;
if (currentvalue == "X"){
document.getElementById("turn").value = "O";
}
else{
document.getElementById("turn").value = "X";
}
}<!DOCTYPE html>
<head>
<script type = "text/javascript" src = "app.js" defer></script>
<link rel = "stylesheet" href = "style.css">
</head>
<body>
<input type = "button" value = "X" id = "turn" onclick = "turn();">
</body>
</html>Вам нужно добавить атрибут отсрочки.
Это исправило это! Я пробовал это раньше, но случайно оставил window.addEventListener('DOMContentLoaded', fn); в своем javascript в то же время, и это каким-то образом вызывало проблему. Скопировал/вставил в точности ваш (без этого лишнего дополнения), и это как-то сработало. Спасибо за помощь :)
Добро пожаловать. Defer заставляет его загружать js, но ждать завершения синтаксического анализа HTML. Затем проанализируйте файл js.
Ваш код запускается до загрузки DOM. Либо поместите вызов скрипта перед
</body>или используйте отсрочку, либоwindow.addEventListener('DOMContentLoaded', fn);.