O Em Busca do Código é um site em formato de plataforma de ensino a distância (EAD), totalmente aberta e gratuita.

Aprendendo e ensinando, essa é a minha regra para mim.

Publicado dia 28 de junho de 2017.

Compre um adesivo do Em Busca do Código.

Publicidade

Publicidade

Publicidade

Pegar valor digitado utilizando JavaScript. Dica 29

Bem vindo a dica 29 de JavaScript da Em Busca do Código, nosso canal exclusivo de programação e tecnologia. E se você é novo por aqui, já se inscreve no canal do youTube, curta nossa página do Facebook.

O vídeo complementa o texto e o texto completa o vídeo, assista.

Publicidade

Sem mais delongas, nessa dica nós veremos como capturar o valor digitado.

Nosso documento HTML inicial tem um input e um botão. Além do padrão, que é um título, um doc. JS linkado, uma tag meta para os caracteres não ficarem estranhos.

<!DOCTYPE html>
<html>
    <head>
        <title>Pegar valor digitado utilizando JavaScript. Dica 29</title>
        <script src="pegar.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Pegar valor digitado utilizando JavaScript. Dica 29</h1>
            <input type="text">
            <input type="submit">
    </body>
</html>

A primeira coisa que faremos nessa dica é adicionar um ID para o input do tipo texto.

<input type="text" id=valor>

E um evento onclick e um value em nosso botão, que na verdade é do tipo submit.

<input type="submit" onclick="capturar()" value="escreva algo">

Publicidade

E neste exemplo, nós iremos escrever na mesma página web o que já foi digitado pelo usuário, então vamos criar uma tag p com um ID especifico que utilizaremos já já no JavaScript.

<p id="valorDigitado"></p>

Agora vamos ao nosso arquivo .js.

Inicialmente nosso arquivo JS está em branco, e a primeira coisa que fazemos é adicionar a função informada em nosso evento onclick.

function capturar () {

}

Eu gosto de deixar minhas variáveis bem no inicio do meu código JS, isso é gosto.

var capturando = "";

Agora nós vamos capturar o valor digitado com essa variável que acabamos de criar, isso, dentro da função.

capturando = document.getElementById('valor').value;

Agora nos resta testar.

A seguir você confere o código HTML completo:

<!DOCTYPE html>
<html>
    <head>
        <title>Pegar valor digitado utilizando JavaScript. Dica 29</title>
        <script src="pegar.js"></script>
        <meta charset="UTF-8">
    </head>
    <body>
        <h1>Pegar valor digitado utilizando JavaScript. Dica 29</h1>
            <input type="text" id=valor>
            <input type="submit" onclick="capturar()" value="escreva algo">
            <p id="valorDigitado"></p>
    </body>
</html>

Agora o código fonte JS:

var capturando = "";
function capturar () {
    capturando = document.getElementById('valor').value;
    document.getElementById('valorDigitado').innerHTML = capturando;
}

Publicidade

Por mais que seja curtíssima, essa dica fica por aqui, confira também nossas outras dicas de JavaScript, caso não saiba, acabou de conferir uma das aulas de um curso. Espero que tenha gostado da leitura e, se esta dica foi útil, curta a Em Busca do Código no Facebook, de um like nesse vídeo no YouTube.

Até mais.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.