Почему не работает мой код на js
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
<script>
let button = document.querySelector('.btn')
let result = document.querySelector('.result')
button.addEventListener('click', result_send)
function result_send() {
let code = document.querySelector('.input_code').value
result.innerHTML = code
}
</script>
</head>
<header>
<h1>Добро пожаловать на сайт поисковика тегов</h1>
</header>
<body>
<main>
<div class="code">
<label class="label">Введите тег ниже</label>
<input class="input" type="text" placeholder="Вводить здесь!">
<div class="btn">Найти</div>
</div>
<h1 class="result"></h1>
</main>
</body>
</html> Вот код html и js почему-то вылезает ошибка "TypeError: Cannot read properties of null (reading 'addEventListener')" почему?
Проблема в том, что ваш JavaScript код выполняется до того, как DOM полностью загружен. Когда скрипт пытается найти элемент с классом 'btn' через querySelector, элемент ещё не существует, потому что скрипт находится в секции <head>, а сам элемент - в <body>.
Есть два способа исправить это:
1. Переместить скрипт в конец body:
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<header>
<h1>Добро пожаловать на сайт поисковика тегов</h1>
</header>
<body>
<main>
<div class="code">
<label class="label">Введите тег ниже</label>
<input class="input" type="text" placeholder="Вводить здесь!">
<div class="btn">Найти</div>
</div>
<h1 class="result"></h1>
</main>
<script>
let button = document.querySelector('.btn')
let result = document.querySelector('.result')
button.addEventListener('click', result_send)
function result_send() {
let code = document.querySelector('.input_code').value
result.innerHTML = code
}
</script>
</body>
</html>
2. Или обернуть код в слушатель события DOMContentLoaded:
<script>
document.addEventListener('DOMContentLoaded', function() {
let button = document.querySelector('.btn')
let result = document.querySelector('.result')
button.addEventListener('click', result_send)
function result_send() {
let code = document.querySelector('.input_code').value
result.innerHTML = code
}
});
</script>
Также заметил ещё одну ошибку: у вас в HTML input имеет класс "input", а в JavaScript вы ищете элемент с классом "input_code". Нужно исправить это несоответствие, иначе код не будет работать корректно. Измените либо класс в HTML на "input_code", либо в JavaScript измените селектор на '.input'.
Упрости. Зачем тебе лишние поиски элементов, если ты кнопке можешь задать свойство "onclick", которое будет вызывать твою функцию
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<header>
<h1>Добро пожаловать на сайт поисковика тегов</h1>
</header>
<body>
<main>
<div class="code">
<label class="label">Введите тег ниже</label>
<input class="input" type="text" placeholder="Вводить здесь!">
<div class="btn" onclick="result_send()">Найти</div>
</div>
<h1 class="result"></h1>
</main>
<script>
function result_send() {
let code = document.querySelector('.input_code').value
result.innerHTML = code
}
</script>
</body>
</html> попроси жпт чтобы он исправил свои же ошибки
Гейм47ошибк