Не работает Функция changeFirstSymbol. Хэлп Гайс

Question

Всем привет! Есть задачка: Дана строка. Сделайте заглавным первый символ каждого слова этой строки. Для этого сделайте вспомогательную функцию ucfirst, которая будет получать строку, делать первый символ этой строки заглавным и возвращать обратно строку с заглавной первой буквой.

Задачу надо решить разделяя каждую функцию отдельно и объявлять их в одной главной функции. Моя реализация примерно такая:

    <input type="text" class="input">


    let input = document.querySelector('.input');
    input.addEventListener('blur', changeFirstSymbol);

    changeFirstSymbol(input.value);

    function changeFirstSymbol(str) {
        getString(ucFirst(getArrayFromString(str)));
    }

    function getArrayFromString(str) {
        arr = str.split(' ');
        return arr;
    }

    function ucFirst(arr) {
        let newArr = [];
        for (let i = 0; i < arr.length; i++) {
            newArr[i] = arr[i].substr(0, 1).toUpperCase() + arr[i].substr(1);
        }
        return newArr;
    }

    function getString(arr) {
        str = arr.join(' ');
        return str;
    }

сonsole выдает следующую ошибку:

    Uncaught TypeError: str.split is not a function (main.js:12)
    at getArrayFromString (main.js:12)
    at HTMLInputElement.changeFirstSymbol (main.js:8)

Подскажите если есть идеи?

Answer 1

В целом почти всё правильно, есть только некоторые правки.

let input = document.querySelector('.input');
input.addEventListener('blur', changeFirstSymbol);

changeFirstSymbol(); // Тут не надо задавать параметр.

function changeFirstSymbol() {
    let v = input.value; //Параметр получаем в этой функции 
    let z = getString(ucFirst(getArrayFromString(v))); // получаем значения выполненных операций
    console.log(z); // выводим значение (Для демонстрации) А так можно записать и в input обратно и так далее
    return z;
}

function getArrayFromString(str) {
    let arr = str.split(' '); // не забываем let, так как в данной функции arr не была ещё объявлена, а через параметры она не передаётся
    return arr;
}

function ucFirst(arr) {
    let newArr = [];
    for (let i = 0; i < arr.length; i++) {
        newArr[i] = arr[i].substr(0, 1).toUpperCase() + arr[i].substr(1);
    }
    return newArr;
}

function getString(arr) {
    let str = arr.join(' '); // Не забываем объявить переменную, так как в этой функции она ещё не была объявлена и не передавалась через параметры функции.
    return str;
}

<input type="text" class="input">

Answer 2

Ошибка была в input.addEventListener('blur', changeFirstSymbol);. Дело в том, что вы не передали в функцию changeFirstSymbol параметр.

Посмотрите работающий пример.

let inputs = document.querySelectorAll('.input,.second-input');
console.log(inputs.length);
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('blur', function() {
    const result = changeFirstSymbol(inputs[i].value);
    console.log(result); // выводим результат в консоль
  });
}

function changeFirstSymbol(str) {
  const array = getArrayFromString(str);
  const arrayUCFirst = ucFirstArray(array);
  return getString(arrayUCFirst);
}

function ucFirstString(str) {
  return str.substr(0, 1).toUpperCase() + str.substr(1);
}

function getArrayFromString(str) {
  return str.split(' ');
}

function ucFirstArray(arr) {
  const newArr = [];
  for (let i = 0; i < arr.length; i++) {
    const str = ucFirstString(arr[i]);
    newArr.push(str);
  }
  return newArr;
}

function getString(arr) {
  return arr.join(' ');
}

<input type="text" class="input">
<input type="text" class="second-input">

БЛОГ НА HUSL

Не работает Функция changeFirstSymbol. Хэлп Гайс

Ответы (2 шт):