PORQUE A VARIÁVEL QUE CRIEI PARA CALCULAR A VARIAÇÃO PERCENTUAL NÃO FUNCIONA?

Oi, tudo beleza?

Isto ocorre porque fora da função verifica(), o input.value possui valor vazio, ele só terá algum valor diferente de vazio após clicarmos no botão "compare com meu segredo" que chama a função verifica. Isto é feito neste trecho:

button.onclick = verifica; 

Por isto, quando a operação abaixo está fora da função em questão, resulta no valor -100, pois, o input.value está vazio ou seja, a operação acaba sendo (-1)(*100)

varPercentual = ((input.value/segredo)-1)*100;

Não precisa de estar necessariamente dentro do else, pode colocar também no no inicio da função verifica, contanto que esta operação esteja dentro do escopo desta função, por exemplo:

function verifica(){
    var varPercentual = ((input.value/segredo)-1)*100;
    if(input.value == segredo){
        alert("Você ACERTOU!");

    } else{
        alert("Você errou!!!! O valor correto é " + varPercentual.toFixed(2) + "%");
    }
    input.value = "";
    input.focus();
}

Qualquer dúvida estou a disposição. Espero ter ajudado. Bons estudos!!!

Oi Nadia,

Como assim se antes temos a variável "input" recebendo o valor digitado?

Ou Você esta querendo dizer que quando eu digito um nº na caixa aberta pelo esse número não esta disponível mesmo usando a document.querySelector ?

Outra dúvida que tenho é porque tenho que colocar "input.value" se a variável "input" já recebeu o valor digitado. É só limitação do comando input?

var input = document.querySelector("input");

Obrigado

Oi Lofeudo,

A variável input recebe o valor digitado, mas só conseguimos acessar este valor utilizado a propriedade value que é responsável por retornar o valor do atributo de um campo de texto. Diretamente, através de apenas "input" não é possível, por exemplo:

console.log(input) //Não é possível

Até aqui tudo tranquilo ?

E sim, antes temos a variável input recebendo o valor digitado. Mas, através de seu código, só iremos saber este valor, quando houver um clique no botão e este clique, irá chamar a função verifica. Isto é explicitado no evento:

    button.onclick = verifica;    

Por isto que teremos um valor diferente de vazio apenas dentro da função verifica, pois é ela quem é ativada com o clique do botão. Beleza?

Talvez você se pergunte: se eu colocar o input.value fora da função verifica eu irei conseguir calcular o percentual fora dela?

A resposta é não, porque novamente voltamos ao caso de termos um valor diferente de vazio para o campo de texto, apenas quando escrevemos um valor numérico e apertamos o botão de comparar o segredo.

Espero ter esclarecido suas dúvidas. Qualquer coisa, fique a vontade. Bons estudos!!!

Oi Nadia,

Vc terá que clicar em editar para ver os codigos aqui no chat.

Esta melhorando meu entendimento .... rsrs ... mas para mim mexer com o input "não é tão intuitivo" quanto foi com o comando prompt.

Na vídeo-aula da Alura "Campo de texto" do módulo 8 (Interaja de maneira diferente com o usuário), o professor diz no tempo 5:15 que se colocar alert(input.value) irá imprimir o valor. Pelo que você me explicou acima ele deve ter se enganado né? (sem querer ofender ok? Sou professor de exatas e sei muito bem como é gravar aula em vídeo....rs). Inclusive eu coloquei o código1 abaixo e deu erro:

BEM... CONTINUANDO .... fiz o código2 simples para vizualizar no CHROME o valor da entrada mas não deu certo. Eu queria colocar primeiro um valor na caixa para depois clicar no bottun e aí sim aparecer o valor da caixa. Deu errado!

Porque?

MMAAAAASS quando eu fiz o codigo3 colocando o alert "dentro" de uma função aí funcionou... veja o código abaixo:

Não tem jeito de usar o "button.onclick =" diretamente?

OBRIGADO

Bom dia Lofeudo, como vai ?

Pode ser difícil a compressão mesmo, mas vamos por partes, tudo bem?

No caso do seu código, o fluxo é o seguinte: só iremos saber o valor do campo input, usando o input.value dentro da função verifica, pois este value do campo é ativado quando apertamos o botão para comparar, e este botão por sua vez, chama a função verifica.

"o professor diz no tempo 5:15 que se colocar alert(input.value) irá imprimir o valor."

O que ele disse sobre saber o valor com input.value está certo, porém, mesmo que você tente da forma como ele mostrou no minuto 5:15, irá imprimir um valor vazio, isto porque precisamos de algo para nos enviar/ativar o valor que há no input, no nosso caso, um botão.

Imagine uma pessoa chamada José que diz o seguinte:

• Estou com o valor aqui, alguém quer saber? Se quiser saber, aperta no botão "comparar valor" que irei enviar.

Caso contrário, não tem como José saber que alguém quer ver o valor, entende? Por isto que imprime vazio, então temos que sinalizar que queremos saber.

Sobre usar o "button.onclick =" diretamente, não há como, pois ele espera receber uma função em sua chamada. O que podemos fazer é usar o onclick diretamente, mas ele também chamará uma função, por exemplo:

<meta charset="UTF-8">

<input id="mostrar-valor"/>

<script>


var input = document.querySelector("input").onclick = function () {
    alert(document.getElementById("mostrar-valor").value);
}

</script>

Neste caso, toda vez que eu clicar na caixa de texto, irá me apresentar o um alert com o valor dela. Observe que também preciso utilizar o .value

Em relação ao: document.getElementById("mostrar-valor").value eu digo para o meu código:

• procura para mim um uma tag que cujo o nome no id seja "mostrar-valor". Quando encontrar esta tag, me mostra o valor dela.

Resumindo: para sabermos o valor de algum input usando input.value, temos que mandar algum evento, seja ele apertar um botão, uma tecla, um clique ... para que nosso código saiba que há alguém querendo ver aquele valor e geralmente, isto é encapsulado dentro de uma função para que eu possa passá-la como referência ou chamá-la em um determinado ponto.

Espero ter ajudado a sanar suas dúvidas. Bons estudos!!!