JavaScript не взаимодействует с моим HTML-файлом
В моем HTML-файле есть профиль и кнопка помощи, моя кнопка помощи содержит модальное окно с вопросом и 3 кнопки. Если вы выберете кнопку «Да», количество правильных ответов в таблице кнопки профиля увеличится. И наоборот, кнопка «Нет» для неправильных ответов.
<!-- pretty buttons -->
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- MY Script JS -->
<script src = ".\script.js"></script>
<html lang = "en">
<!-- Create Navigation Buttons -->
<div class = "NavBar">
<button type = "button" class = "btn btn-profile" data-toggle = "modal" data-target = "#profileMod" title = "Profile101" data-content = "Hehehe">Profile</button>
<button type = "button" class = "btn btn-help" data-toggle = "modal" data-target = "#helpMod" title = "Help101" data-content = "Hohohoho">Help</button>
</div>
<!-- Profile Statistics | Modal -->
<div id = "profileMod" class = "modal fade" role = "dialog">
<div class = "modal-dialog">
<!-- Modal content-->
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal">×</button>
<h4 class = "modal-title">Profile Stats</h4>
</div>
<!-- table display -->
<div class = "modal-body">
<table>
<tr>
<th>Right Answers:</th>
<th>Wrong Answers: </th>
</tr>
<tr> <!-- Record of Questions-->
<td><input type = "number" id = "outputright" value=0 readonly> </td>
<td><input type = "number" id = "outputwrong" value=0 readonly> </td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- Help Modal -->
<div id = "helpMod" class = "modal fade" role = "dialog">
<div class = "modal-dialog">
<!-- Modal content-->
<div class = "modal-content">
<div class = "modal-header">
<button type = "button" class = "close" data-dismiss = "modal">×</button>
<h4 class = "modal-title">Test Question Modal</h4>
</div>
<!-- Question answers -->
<div class = "input-group">
<p>Do you agree?</p>
<button id = "right" type = "button" class = "btn" data-dismiss = "modal">Yes</button>
<button id = "wrong" type = "button" class = "btn" data-dismiss = "modal">No</button>
<button type = "button" class = "btn">Maybe</button>
</div>
</div>
</div>
</div>
Мой script.js читается в HTML-файле
<!-- MY Script JS -->
<script src = ".\script.js"></script>
Мой script.js приведен ниже:
/* Profile Statistic Counters */
let rightCount = 0;
let wrongCount = 0;
function getRight() { return rightCount; }
function getWrong() { return wrongCount; }
function right() { rightCount++; }
function wrong() { wrongCount++; }
/* whatever is 'right' & 'wrong' answer | assign ID value */
const rightInc = document.getElementById("right");
const wrongInc = document.getElementById("wrong");
/* display amount of 'right' & 'wrong' answers */
const rightAns = document.getElementById("outputright");
const wrongAns = document.getElementById("outputwrong");
/* when clicked, increment based on 'right' & 'wrong' */
rightInc.addEventListener("click", ()=> {
right();
rightAns.value = getRight(); // Count updated
//localStorage.setItem("answer", "right"); // Updating data
});
wrongInc.addEventListener("click", ()=> {
wrong()
wrongAns.value = getWrong(); // Count updated
//localStorage.setItem("answer", "wrong"); // Updating data
});
Он правильно взаимодействует, когда я ввожу свой файл script.js в HTML-теги <\script>, но когда он находится в отдельных файлах в той же папке, он отказывается общаться. Я также попробовал прочитать файл сценария по-другому. Мой script.js читается в HTML-файле без расширения .\, и это не удалось.
<!-- MY Script JS -->
<script src = "script.js"></script>
Все идентификаторы были трижды проверены, и ввод в скрипт HTML-тегов подтвердил, что мой код находится в рабочем состоянии. Я просто немного не понимаю, почему он не общается должным образом.
При проверке DevConsol в моем веб-браузере он утверждает, что мой синтаксис addEventListener неверен, особенно в следующих двух функциях в моем JS.
/* when correctincrement based on 'right' & 'wrong' */
rightInc.addEventListener("click", ()=> {
right();
rightAns.value = getRight(); // Count updated
//localStorage.setItem("answer", "right"); // Updating data
});
wrongInc.addEventListener("click", ()=> {
wrong()
wrongAns.value = getWrong(); // Count updated
//localStorage.setItem("answer", "wrong"); // Updating data
});
Сообщение об ошибке, о котором идет речь:
Uncaught TypeError: невозможно прочитать свойства null (чтение «addEventListener») в script.js:22:10
Ошибка ничего не говорит о синтаксисе
Я предполагаю, что вашего модального окна нет в DOM при запуске скрипта.
@konrad Именно поэтому я был сбит с толку: их размещение в одном файле сработало, поэтому я был безумно растерян, почему, когда я его разделил, он перестал работать. Heesel разъяснил мою дезинформацию по этому поводу
@Конрад Что это значит? ДОМ?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
одна из ваших переменных rightInc или wrongInc пуста. выведите значения этих переменных на консоль:
const rightInc = document.getElementById("right");
const wrongInc = document.getElementById("wrong");
console.info( rightInc );
console.info( wrongInc );
Кроме того, в приведенном коде страницы перепутан порядок тегов. Тег <html> не может идти после тегов <link>.
Организуйте структуру страницы в соответствии со стандартом.
Спасибо, что поймали это! Я начинаю чаще использовать инструменты разработчика в браузерах, поэтому мне нужно не забыть записать еще несколько вещей! Это было полезно ^-^
Ваш скрипт и теги ссылок должны находиться в <head> вашего HTML-кода. Кроме того, вы использовали неправильный способ указания вашего скрипта.
Если он находится в той же папке:
<script src = "script.js"></script>
если он находится в подкаталоге, например scripts, вы делаете это так:
<script src = "scripts/script.js"></script>
Вы также можете попробовать добавить атрибут defer в тег скрипта:
<script defer src = "script.js"></script>
Если установлен атрибут defer, он указывает, что сценарий загружается параллельно с анализом страницы и выполняется после завершения анализа страницы.
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8" />
<title>Page Title</title>
<meta name = "viewport" content = "width=device-width,initial-scale=1" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" />
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- MY Script JS -->
<script src = "script.js"></script>
</head>
<body>
<!-- Your HTML here -->
</body>
</html>
Благодарю за ваш ответ! Я думал, что HTML гораздо более снисходителен к тому, где все размещается.
Вы должны использовать ./ «косую черту», а не другую в путях.