3
respostas

Não consigo atribuir attr no botão reiniciar

var campo = $('.campo-digitacao');
var tempoInicial = $('#segundos').text();

$(function(){
contadorCaracteres ();
iniciaCronometro ();
tamanhoFrases ();
comparadorFrases ()
$('#bto-reiniciar').click(Reinicializar);
});

function tamanhoFrases (){
    var frase = $('.frase').text();
    var tamanhoFrase = frase.split(/\S+/).length - 1;
    var palavras = $('#palavras');


palavras.text(tamanhoFrase);

}
function contadorCaracteres (){

campo.on('input',function(){
    var conteudo = campo.val();
    var qtdPalavras = conteudo.split(/\S+/).length - 1;
    var qtdCaracteres = conteudo.length;
    $('#countPalavras').text(qtdPalavras);
    $('#countCaracteres').text(qtdCaracteres);
});
}

function iniciaCronometro (){
    var tempoRestante = $('#segundos').text();
campo.one('focus', function(){
    $("#bto-reiniciar").attr("disabled",true);
    var cronometro = setInterval(function(){
    tempoRestante--;
    $('#segundos').text(tempoRestante);
    if(tempoRestante < 1){
        clearInterval(cronometro);
        finalizaJogo();
    }
},1000);
});
}
function finalizaJogo (){
    campo.attr('disabled', true);
    $("#bto-reiniciar").attr("disabled", false);
    campo.addClass('campo-desabilitado');
    inserePlacar ();
}
function inserePlacar (){
    var corpoTabela = $('.placar').find('tbody');
    var usuario = 'Pablo';
    var numPalavras = $('#countPalavras').text();
    var segundos = '0'
    var linha = '<tr>'+
                    '<td>'+ usuario +'</td>'+
                    '<td>'+ numPalavras + '</td>'+
                    '<td>'+ segundos + '</td>'+
                '</tr>';
    corpoTabela.prepend(linha);
}

function comparadorFrases (){
    var frase = $('.frase').text();
    campo.on('input', function(){
    var digitado = campo.val();
    var comparado = frase.substr(0, digitado.length);
    if(digitado == comparado){
        campo.addClass('bordaCerta');
        campo.removeClass('bordaErrado');
    }else{
        campo.removeClass('bordaCerta');
        campo.addClass('bordaErrado');
    }

});

}
function Reinicializar (){
    campo.attr('disabled', false);
    campo.val('');
    $('#countPalavras').text(0);
    $('#countCaracteres').text(0);
    $('#segundos').text(tempoInicial);
    iniciaCronometro();    
    console.log('cliquei');
    campo.removeClass('campo-desabilitado');
    campo.removeClass('bordaCerta')
    campo.removeClass('bordaErrado')
}

O botão de reiniciar ele fica disponivel mesmo quando é aberta a pagina e mesmo colocando disabled ele fica disponivel, enquanto está digitando ele ta liberado pra clicar e se ficar clicando ele fica bugando o tempo.

tentei colocar o disabled, trocar a ordem e não estou conseguindo ajeitar.

3 respostas

Fala aí Pablo, beleza? Tenta adicionar uma classe para ele com o .addClass, dai nessa classe você pode um CSS para desabilitar o click:

.is-disabled {
    pointer-events: none;
}

Dai é so adicionar/tirar a class, dá para fazer com o toggleClass.

Espero ter ajudado.

Consegui resolver fazendo isso, muito obrigado.

De nada Pablo, não esqueça de marcar o tópico como solucionado para que possa ajudar outros alunos.

Abraços