Почему не работает мой код на js

Question

Почему не работает мой код на js

Артем Горячев Ученик (38), открыт 1 неделю назад

 <!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')" почему?

Answer 1

Обитель адского зла и тьмЫ Профи (698) 1 неделю назад

Гейм47ошибк

Артем ГорячевУченик (38) 1 неделю назад

?

Answer 2

Проблема в том, что ваш 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'.

Answer 3

Александр Искусственный Интеллект (308978) 1 неделю назад

попроси жпт чтобы он исправил свои же ошибки

Answer 4

Упрости. Зачем тебе лишние поиски элементов, если ты кнопке можешь задать свойство "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>