При добавлении следующих функций, все работает некорректно. Возможно как-то исправить?

Question

        let parent = document.querySelector('.btn');
        restartBtn = document.createElement('button');
        restartBtn.className.add = 'btn-restart';
        restartBtn.textContent = 'Начать новую игру';
        parent.appendChild(restartBtn);
        restartBtn.style.fontSize = '16px'
        restartBtn.style.display = 'flex';
        restartBtn.style.padding = '8px';
       
    
    
    restartBtn.addEventListener('click', (e) => {
        win_block.style.display = 'none';
        guesses.innerHTML = '';
        textarea.value = '';
        attempts = 0;
        NUMBER = Math.floor(Math.random() * 10);
        console.log(NUMBER);
        restartBtn.style.display = 'none';
    })

Answer 1

Лучше создайте кнопку в начале с помощью вашей же функции create_btn_Reset, которая вернет вам уже готовый HTMLButtonElement с добавленым обработчиком клика.

/**
* Функции все таки лучше называть без подчеркиваний createBtnReset()
* И лучше определитесь у вас рестарт или ресет, будет меньше путанницы
*/
const restartBtn = create_btn_Reset();

function create_btn_Reset() {
  const parent = document.querySelector('.btn');
  const button = document.createElement('button');
  button.className.add('btn-restart');
  button.textContent = 'Начать новую игру';
  /** Все, что в обработчике лучше разделить на функции поменьше */
  button.addEventListener('click', function(e) => {
    win_block.style.display = 'none';
    guesses.innerHTML = '';
    textarea.value = '';
    attempts = 0;
    NUMBER = Math.floor(Math.random() * 10);
    console.log(NUMBER);
    this.style.display = 'none';
  });
  return button; // пускай функция вернет уже собранную кнопку
};

Советую почитать советы по стилю кода.

Объявлять большое кол-во переменных в глобале - не очень хорошая практика. В вашей игре очень просто читерить, обращаясь к переменным из консоли.

console.log(NUMBER);

Я могу накрутить себе сколько угодно кол-во попыток:

attempts = 500 // станет 500 попыток

Оберните все в анонимную функцию IIFE, чтобы закрыть эту уязвимость.

(() => {
 // код игры
})();

В коде много повторений, некоторые функции включают в себя код из других функций. Старайтесь придерживаться принципа единственной обязанности, разделите код на функции поменьше, которые будут выполнять что-то одно.

Можете почитать про SOLID, DRY

Выводить текст "вы победили", проверяя стили блока в цикле while - это точно не то, что вам нужно.

while (win_block.style.display = 'flex') { // так не делают, этот цикл может никогда не выполниться, страница будет подвисать
    restartBtn.style.position = 'absolute';
    restartBtn.style.marginTop = '15em';
}

Вот так добавлять стили - дело очень неблагодарное. Лучше перенесите их в css и добавте вместе с классом btn-restart.

       // restartBtn.className.add = 'btn-restart';
        restartBtn.className.add('btn-restart');
        restartBtn.textContent = 'Начать новую игру';
        parent.appendChild(restartBtn);
        restartBtn.style.fontSize = '16px' // перенесите в css
        restartBtn.style.display = 'flex'; // перенесите в css
        restartBtn.style.padding = '8px'; // перенесите в css

Бонусом можете посмотреть, как я написал вашу игру в объектно-ориентированном стиле.

CodePen

БЛОГ НА HUSL

При добавлении следующих функций, все работает некорректно. Возможно как-то исправить?

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