Слушатель событий Javascript возвращает значение null

Я новичок в JavaScript, и я пытаюсь создать простой скрипт, который будет показывать в журнале консоли количество символов, введенных в текстовую область.

Вот мой html:

<section class = "hero is-info">
<div class = "hero-body">
<div class = "container">
    <div class = "card">
        <div class = "card-content">
            <div class = "content">
                <div class = "control has-icons-left has-icons-right">
                    <input class = "input is-large" type = "search" placeholder = "" /><span class = "icon is-medium is-left"><i class = "fa fa-search"></i></span><span class = "icon is-medium is-right"><i class = "fa fa-empire"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>

а вот мой js:

const testArea = document.querySelector("#card-content");

function openDropDown(){
let textEnteredLength = testArea.value.length;
console.info(textEnteredLength);
}

testArea.addEventListener("keypress", openDropDown, false);

и вот моя ошибка:

TypeError: testArea is null[Learn More]

Я не понимаю, почему testArea кажется нулевым, поскольку я определил его в первой строке.

javascript dom-events

29.07.2018 20:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

648

Ответы 3

Вы должны добавить идентификатор card-content в тег input следующим образом:

const testArea = document.querySelector("#card-content");

function openDropDown() {
  let textEnteredLength = testArea.value.length;
  console.info(textEnteredLength);
}

testArea.addEventListener("keypress", openDropDown, false);

<section class = "hero is-info">
  <div class = "hero-body">
    <div class = "container">
      <div class = "card">
        <div class = "card-content">
          <div class = "content">
            <div class = "control has-icons-left has-icons-right">
              <input id = "card-content" class = "input is-large" type = "search" placeholder = "" /><span class = "icon is-medium is-left"><i class = "fa fa-search"></i></span><span class = "icon is-medium is-right"><i class = "fa fa-empire"></i></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

@akalogiros вы можете проверить приведенный выше код в ответ и запустить его. он работает, как ожидалось. (возможно, вы забыли обновить querySelector, чтобы передать #card-content, а не card-content)

— 29.07.2018 20:40

29.07.2018 20:25

Вам понадобится id, чтобы выбрать элемент DOM для добавления прослушивателя событий.

<section class = "hero is-info">
<div class = "hero-body">
<div class = "container">
    <div class = "card">
        <div class = "card-content">
            <div class = "content">
                <div class = "control has-icons-left has-icons-right">
                    <input class = "input is-large" id = "card-content" type = "search" placeholder = "" /><span class = "icon is-medium is-left"><i class = "fa fa-search"></i></span><span class = "icon is-medium is-right"><i class = "fa fa-empire"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
const testArea = document.getElementById("card-content");//selects element with id 'card-content'

function openDropDown(){
let textEnteredLength = testArea.value.length;
console.info(textEnteredLength);
}

testArea.addEventListener("keypress", openDropDown, false);
</script>

Вы также можете выбрать элемент по его классу (классам).

<section class = "hero is-info">
    <div class = "hero-body">
    <div class = "container">
        <div class = "card">
            <div class = "card-content">
                <div class = "content">
                    <div class = "control has-icons-left has-icons-right">
                        <input class = "input is-large"  type = "search" placeholder = "" /><span class = "icon is-medium is-left"><i class = "fa fa-search"></i></span><span class = "icon is-medium is-right"><i class = "fa fa-empire"></i></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    const testArea = document.querySelector("input.input.is-large");
    //selects first input element with class of input and is-large

    function openDropDown(){
    let textEnteredLength = testArea.value.length;
    console.info(textEnteredLength);
    }

    testArea.addEventListener("keypress", openDropDown, false);
    </script>

Я обновил html и js соответственно, и проблема не исчезла. TypeError: testArea is null

— 29.07.2018 20:35

@akalogiros Не могли бы вы поместить свой код в JSFiddle для меня?

— 29.07.2018 20:42

@akalogiros Проблема, вероятно, в том, что ваш script работает до того, как DOM будет готов. Поместите ваш script после элементов DOM, и он должен работать: jsfiddle.net/8n0Lsxtd

— 30.07.2018 17:38

29.07.2018 20:29

Вы также можете использовать атрибут onkeyup и вызвать функцию openDropDown() и передать this в качестве аргумента для доступа к элементу input, чтобы проверить количество символов, введенных в поле ввода.

function openDropDown(input){
  console.info(input.value.length) 
}

<section class = "hero is-info">
<div class = "hero-body">
<div class = "container">
    <div class = "card">
        <div class = "card-content">
            <div class = "content">
                <div class = "control has-icons-left has-icons-right">
                    <input class = "input is-large" type = "search" placeholder = "" onkeyup = "openDropDown(this)" /><span class = "icon is-medium is-left"><i class = "fa fa-search"></i></span><span class = "icon is-medium is-right"><i class = "fa fa-empire"></i></span>
                </div>
            </div>
        </div>
    </div>
</div>

29.07.2018 20:43

Другие вопросы по теме

Изменение dispatchEvent в элементе select не может быть обработано делегатом

Хотите добавить addEventListener к нескольким элементам с одним и тем же классом

Отправить запрос axios при выходе со страницы

Изменение скорости создания боксов в процессе (связанные с событиями "изменения" DOM)

Можете ли вы определить, когда PDF-файл распечатывается или загружается из программы просмотра PDF-файлов в браузере?

Ионный поиск, если ребенок был нажат через событие родительского щелчка

OnBeforeUnload перед любым взаимодействием с DOM

Ошибка добавления прослушивателя Javascript: TypeError: trigger.addEventListener не является функцией

Порядок выполнения Javascript - когда происходит window.location.href?

Javascript включает поле ввода после disable = true

Слушатель событий Javascript возвращает значение null

Ответы 3

Другие вопросы по теме

Похожие вопросы