данные не добавляются в массив

Question

мне дали задание написать код - игра в "города". Играть можно, но я также сделал так, чтобы я мог добавлять новые города с сайта, но те не добавляются в массив, а просто пропадают при нажатии на кнопку "добавить". Короче говоря, мне нужно сделать так, чтобы я мог добавлять новые города в массив через сайт, но тот не работает и я не могу найти где ошибка.

const cityNames = ['астана', 'москва', 'тараз', 'замбия', 'ямайка'];
const exceptLetters = ['ь', 'ы', 'ъ'];

//активирует функцию при нажатии
document.getElementById("button").addEventListener("click", addСity);

//добавляет данные
function addСity() {
    var inp = document.getElementById('city');
    cityNames.push(inp.value);
    //чтобы сохранить данные в виде строки
    localStorage.setItem(cityNames, JSON.stringify(cityNames));
    inp.value = "";  
}
  
let computerCityName = _.sample(cityNames);//команда для подбора рандомных городов
let restCityNames = cityNames.filter((cityName) => computerCityName !== cityName);

const getLastLetter = (cityName) => {
    const lastLetter = _.last(cityName);
    if(exceptLetters.includes(lastLetter)){
        return cityName[cityName.length - 2];
    }
    return lastLetter;
};

//сверху команда для исключения ь, ы, ъ

while (true) {
    const userCityName = prompt(`${computerCityName}`);

    //если последняя буква не соответсвует первой букве предыдущего города   
    if (userCityName[0].toLowerCase() !== getLastLetter(computerCityName)) {
        alert('Вы допустили ошибку');
        break;
    }
    //если такого города нет в списке
    if (!restCityNames.includes(userCityName.toLowerCase())) {
        alert('Такого города я незнаю');
        break;
    }

    restCityNames = restCityNames.filter((cityName) => userCityName !== cityName);
    computerCityName = restCityNames.find((cityName) => cityName[0] === getLastLetter(userCityName)); 
    if(!computerCityName) {
        alert('Вы победили!');
        break;
    }
    restCityNames = restCityNames.filter((cityName) => computerCityName !== cityName);
    //для того, чтобы слова не повторялись, если закончатся, то мы победили
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Игра в "города"</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
</head>
<body>
    <h2>Игра в "города"</h2>
    <p><b>Можете добавить название города в библиотеку:</b><br>
        <input type="text" id="city" size="40">
    </p>
    <button id="button">Добавить</button>
    <p id="demo"></p>
    <script src="index.js"></script>
</body>
</html>

БЛОГ НА HUSL

данные не добавляются в массив

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