Как сделать так, чтобы ошибки сайта отображались без ошибок консоли?

Question

Я создаю веб-сайт для смены текста https://textchanger.netlify.com/ и столкнулся с проблемой при попытке отобразить сообщение об ошибке.Я хочу, чтобы ошибка отображалась всякий раз, когда пользователь пытается преобразовать «ничто».

Ошибка отображается, и все в этом аспекте работает нормально, но в консоли Chrome есть некоторые ошибки, которые я не могу отладить.

Ошибка: textchanger.js:43 Uncaught TypeError: Cannot read property 'split' of undefined at Scrambler (textchanger.js:43) at HTMLButtonElement.<anonymous> (textchanger.js:80)

Если у кого-то есть идеи, которые были бы потрясающими!

JSfiddle: https://jsfiddle.net/MysteriousDuck/duc0atjz/

//Check if textinput is not empty
function fooBar(text) {
    if (document.getElementById("inputText").value == "") {
        console.log('Can not convert nothing!')
    } else {
        capitalizer()
    }
}
return textArray.join(''); {

}

//Capitalize every odd letter
function capitalizer() {
    if (document.getElementById("inputText").value == "") {
        alertify.error('Can not convert nothing!')
    } else {
        var x = document.getElementById("inputText").value;
        var string = "";
        for (let i = 0; i < x.length; i++) {
            if (i % 2 == 0) {
                string = string + x[i].toUpperCase();
            } else {
                string = string + x[i];
            }
        }
        return string;
    }
}

Answer 1

Ошибка содержится в вашей функции scrambler().Эта функция выполняется каждый раз, когда пользователь нажимает кнопку Convert независимо от того, введен ввод в текстовую область.Это потому, что ваш слушатель событий просто прослушивает щелчки на этой кнопке Convert и для каждого щелчка он просто запускает функцию scrambler() на основе указанного ввода.Вам необходимо добавить проверку проверки ввода, чтобы устранить эту проблему, поскольку она работает только на допустимом вводе.

Ваша кнопка конвертации Listerner:

convertText.addEventListener('click', function() {
  if (checkbox_1.checked && checkbox_2.checked) {
    console.log("Capitalizing + Scrambling text");
    document.getElementById("convertedText").value = scrambler(capitalizer());
  } else if (checkbox_2.checked) {
    console.log("Scrambling text");
    var text = document.getElementById("inputText").value;
    document.getElementById("convertedText").value = scrambler(text);
  } else if (checkbox_1.checked) {
    console.log("Capitalizing text");
    document.getElementById("convertedText").value = capitalizer();
  }
})

Обратите внимание, что нет проверки входных данных в этом прослушивателе событий , и он принимает допустимое значение в вашей текстовой области convertedText, поэтому вы получаете ошибку undefined, когда пользователь не вводит ничего для преобразования, т. е. не существует преобразуемого текста для разделения

Uncaught TypeError: Невозможно прочитать свойство 'split' из неопределенного

Надеюсь, это поможет!

Answer 2

Код document.getElementById("convertedText").value = scrambler(capitalizer()); выдает ошибку.

capitalizer() в верхнем коде возвращает undefined

Поскольку внутри метода выполняется условие alertify.error('Can not convert nothing!'), которое ничего не возвращает, т.е. undefined

Затем scrambler пытается split a text параметр, равный undefined