Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

Desabilitar botão, pq não funciona?

O código abaixo era para desabilitar o botão de reiniciar depois que o meu campo fosse ativado, na função cronometroJogo, e depois que ela chamasse a função tempoOut era para habilitar o botão, porém ele está ficando habilitado mesmo quando entra no campo e a função timeOut não foi chamada ainda, alguém sabe o pq?

var campo = $(".campo-digitacao");
var tempoInicial = $("#time").text();
$("#butao-reinicia").click(reiniciaJogo);

$(function () {
  palavrasFraseInicial();
  preencheResultado();
  cronometroJogo();
  adicionaBorda();
  atualizaPlacar();
});

function tempoNovo(tempo){
  $("#time").text(tempo);
  tempoInicial = tempo;
}

function palavrasFraseInicial() {
  var frase = $(".frase").text();
  var tamanhoFrase = frase.split(" ").length;
  var numeroPalavras = $("#numero-palavras");
  numeroPalavras.text(tamanhoFrase);
}

function preencheResultado() {
  campo.on("input", function(){
  var quantidadePalavrasDigitadas = campo.val().split(/\s+/).length;
  var numeroPalavrasDigitadas = $("#conta-palavras");
  numeroPalavrasDigitadas.text(quantidadePalavrasDigitadas);
  var numeroCaracter = campo.val().length;
  $("#conta-caracter").text(numeroCaracter);
  });
}

function cronometroJogo() {
  campo.one("focus", function(){
    var tempoRestante = $("#time").text();
    $("#butao-reinicia").attr("disabled", true);
    var cronometro = setInterval(function(){
      tempoRestante = tempoRestante - 1;
      $("#time").text(tempoRestante);
      if(tempoRestante <= 0){
        clearInterval(cronometro);
        tempoOut();
      }
    },1000);

  });
}

function tempoOut() {
  campo.addClass("campo-desativado");
  $("#butao-reinicia").attr("disabled", false);
  campo.attr("disabled", true);
  $(".jogador").fadeIn();
  $("#butao-add").one("click", function () {
  addPlacar();
  });
}

function adicionaBorda() {
  campo.on("input", function () {
    var digitado = campo.val();
    var comparavel = $(".frase").text().substr(0, digitado.length);
    if(digitado == comparavel){
      campo.addClass("borda-verde");
      campo.removeClass("borda-vermelha");
    } else{
      campo.addClass("borda-vermelha");
      campo.removeClass("borda-verde");
    }
  });
}

function reiniciaJogo() {
    $(".jogador").fadeOut();
    $("#gamer").val("");
    $("#time").text(tempoInicial);
    campo.attr("disabled", false);
    campo.val("");
    $("#conta-palavras").text("0");
    $("#conta-caracter").text("0");
    cronometroJogo();
    campo.removeClass("campo-desativado");
    campo.removeClass("borda-verde");
    campo.removeClass("borda-vermelha");
}
6 respostas

Oi Renan, tudo bom?

Acho que o problema está no acesso do disable pela função attr. Tenta rodar pela função prop. Algo como:

  $("#butao-reinicia").prop("disabled",true);

E, para remover a prop, você pode usar a função removeProp:

$("#butao-reincia").removeProp("disabled");

Oi André tudo ótimo, e com vc?

Infelizmente ele ainda não está desabilitando, enquanto o tempo tá diminuindo ele ainda pode ser acionado :(, mas obrigado pela força. :)

Oi Renan, tudo bom?

Você checou seu html para ver se o nome do id está correto?

posta seu código no https://codepen.io/ ou http://jsfiddle.net/ e compartilha com a gente para vermos como está se comportando

Oi Adriano tudo ótimo e com vc?

Chequei sim.. eu postei ele no github: https://github.com/renansald/alura-typer, se tiver como dá uma olhada eu agradeço..

Obrigado pela força :)

solução!

Oi Renan, bom dia.

Cara, checando seu código eu percebi que o meu tinha o mesmo problema lol. Mas eu já descobri a causa :-)

O problema é com o Materialize, ao que tudo indica, não dá para alterar as propriedades da tag <a> por algum motivo obscuro.

Assim sendo, existe uma solução:

É substituir a tag <a> por <button>.

Ps: Mais cedo eu tentei ao invés de usar attr('disabled', true), usar addClass('disabled') e remover depois. O efeito parece ser o mesmo, mas o botão ainda é ativado se ele for clicado, porque adicionar a classe disabled só altera o estilo e não o atributo.

Bom dia Adriano..

Cara deu muito certo, agora entendi o porque do erro, muito obrigado pela ajudar.. :)