Почему возникает ошибка popup.js:32 Uncaught TypeError: Cannot read properties of null (reading 'value')?

Question

[chtopisatsuda]

Здравствуйте. У меня возникает ошибка

popup.js:32 Uncaught TypeError: Cannot read properties of null (reading 'value')

не пишите оочевидных вещей по типу :
поставь тег скрипт в боди , а не в хед
я это уже давно сделал

вот код :

let popupBg = document.querySelector('.popup__bg'); // Фон попап окна
let popup = document.querySelector('.popup'); // Само окно
let openPopupButtons = document.querySelectorAll('#popup'); // Кнопки для показа окна
let closePopupButton = document.querySelector('.close-popup'); // Кнопка для скрытия окна
let buttonSubmit = document.querySelector('.button-submit'); // Кнопка отправки формы

const nameInput = document.querySelector('input-name')
const telInput = document.querySelector('input-tel')
const textInput = document.querySelector('input-text')



openPopupButtons.forEach((button) => { // Перебираем все кнопки
    button.addEventListener('click', (e) => { // Для каждой вешаем обработчик событий на клик
        e.preventDefault(); // Предотвращаем дефолтное поведение браузера
        popupBg.classList.add('active'); // Добавляем класс 'active' для фона
        popup.classList.add('active'); // И для самого окна
    })
});





closePopupButton.addEventListener('click',() => { // Вешаем обработчик на крестик
    popupBg.classList.remove('active'); // Убираем активный класс с фона
    popup.classList.remove('active'); // И с окна
});

buttonSubmit.addEventListener('click', (e) => {
    e.preventDefault()
    userName = nameInput.value;
    tel = telInput.value;
    text = textInput.value;

})

document.addEventListener('click', (e) => { // Вешаем обработчик на весь документ
    if(e.target === popupBg) { // Если цель клика - фот, то:
        popupBg.classList.remove('active'); // Убираем активный класс с фона
        popup.classList.remove('active'); // И с окна
    }
});

Answer 1

[Иван]

1. document.querySelector('input-name') (и другие такие же) — Что за selector такой 'input-name'?
Либо ('.input-name') - как класс, либо ('input[name="input-name"]')

2. Везде const поставить:

const userName = nameInput.value;
const tel = telInput.value;
const text = textInput.value;

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

new FormData(form)

Пример