buttonSelected js

var elDivTitulo = document.getElementsByClassName("titulo");
var parrafo = document.getElementById("parrafo");
var btnCrearPatron = document.getElementById("btn--crear--patron");
var botones = document.getElementsByClassName("boton");

var letras = "abcdef".toUpperCase().split('');
var patronUser = "";

function crearPatron() {
    var titulo = '';

    for (var i = 0; i < 4; i++) {
        titulo += letras[Math.round(Math.random() * 5)];
    }
    parrafo.textContent = titulo;
}
crearPatron();

function crearLetrasBotones() {
    for (var i = 0; i < 12; i++) {
        botones[i].textContent = letras[Math.round(Math.random() * 5)];
    }
}
crearLetrasBotones();

function resetear() {
    crearPatron();
    crearLetrasBotones();
}

function isButtonSelected(e) {
    e.target.style.background = "rgb(40, 90, 170)";
    e.target.removeEventListener('click', isButtonSelected);
}

function cargarPatronUser(e) {
    patronUser += e.target.textContent;

    if (patronUser.length === 4) {
        for (var i = 0; i < botones.length; i++) {
            botones[i].removeEventListener('click', cargarPatronUser);
        }
        styleDisabledButton();
    } //else {
    //     isButtonSelected();
    // }
    console.log(patronUser);
}

// cargas eventos
btnCrearPatron.addEventListener('click', resetear);
for (var i = 0; i < botones.length; i++) {
    botones[i].addEventListener('click', cargarPatronUser);
}

// - - - M O D I F I C A N D O  E S T I L O S - - -

// botones
function styleDisabledButton() {
    for (var i = 0; i < botones.length; i++) {
        botones[i].classList.add("boton-disabled");
    }
}