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

269

26 марта 2022, 16:20

Всем привет! Есть задачка: Дана строка. Сделайте заглавным первый символ каждого слова этой строки. Для этого сделайте вспомогательную функцию 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

Ошибка была в 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">

Answer 2

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

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; 
}