Minicursos - Javascript

getElementById


Bem, agora que já fizemos exemplos simples de como criar e chamar funções em JavaScript, vamos avançar um pouco mais. Vamos fazer, como primeira parte desse tutorial, uma função que leia dois campos de um formulário HTML e exiba seu produto. Para isso faremos uso de uma função muito importante, chamada de getElementById.

Entendendo o getElementById

Esta função permite capturar e manipular campos de formulários HTML a partir do seu identificador id, pois ele é a chave para que o JavaScript consiga localiza-lo. Sua sintaxe é bastante simples. Se quisermos pegar o valor de um campo identificado no código com o id=”telefone” e armazena-lo em uma variável, podemos fazer dessa forma:

var conteudoCampo = document.getElementById(“telefone”).value;

Neste comando temos a palavra document, que representa o objeto atual onde o script se encontra, depois entra a função em si, que no caso é a getElementById, então, entre parênteses especificamos o identificador que estamos procurando, e o complemento value acessa o seu valor.

Essa função é das mais importantes e usadas em JavaScript. Poderíamos também fazer o contrário, que é inserir um valor no campo, a partir da execução do script. Vamos imaginar uma situação totalmente inversa, na qual tenhamos o valor dentro da variável conteudoCampo e queremos inseri-lo no campo identificado como telefone em nosso formulário. Nosso código JavaScript ficaria assim:

document.getElementById(“telefone”).value = conteudoCampo;

O procedimento é semelhante ao de uma atribuição de valor a uma variável. É bastante simples!

Agora vamos ao exemplo do nosso código, que lerá dois campos com números e exibirá uma janela com o produto dos mesmos.

Nosso código ficará assim:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document <title>

<script type="text/javascript">
function calculaTotal() {
var total = 0;
var numero1 = document.getElementById("numero1").value;
var numero2 = document.getElementById("numero2").value;
total = numero1 * numero2;
alert("O valor dessa multiplicação é: " + total);
}

</script>

</head>
<body>
<form>
Valor 1: <input type="text" id="numero1" />
Valor 2: <input type="text" id="numero2" />


<input type="button" onclick="calculaTotal();" value="Multiplicar" />
</form>
</body>
</html>

Para que fique bem claro o funcionamento dessa importante função, vou comentar o código:

getElementById JavaScript

Vamos repassar o código todo. Eu criei a função com o nome de calculaTotal, que não recebe nenhum argumento, por isso o parênteses está vazio. Depois criei a variável total, que vai exibir o valor da multiplicação, e a inicializei com o valor zero. Em seguida criei a variável numero1, que recebe, através do comando document.getElementById, o valor digitado no campo numero1 do formulário HTML. O fato dos nomes da variável e do campo do formulário serem iguais é apenas uma coincidência. Isso não é um problema. O que importa para que essa leitura aconteça corretamente é que o valor entre parênteses no comando document.getElementById seja idêntico ao informado no id do campo do formulário.

Em seguida inseri, na variável total, o valor da multiplicação das variáveis numero1 pela numero2. Por fim, através da função alert, exibi a frase entre aspas, acrescentando o valor da variável total. O resultado, no navegador, é:

getElementById JavaScript

Vamos fazer o inverso. Agora não vamos exibir o resultado numa caixa de alerta, mas sim dentro de um campo do formulário, como se estivéssemos mostrando ao usuário o resultado da soma de itens de uma compra. Vamos inserir mais um campo no formulário com o nome de resultado, dessa forma:

Resultado: <input type="text" id="resultado" readonly="readonly" />

Coloquei também o parâmetro readonly=’readonly’, para que o usuário não possa editar esse campo.

E nossa função JavaScript agora ficará assim:

<script type="text/javascript">
function calculaTotal() {
var total = 0;
var numero1 = document.getElementById("numero1").value;
var numero2 = document.getElementById("numero2").value;
total = numero1 * numero2;
document.getElementById("resultado").value = total;
}

</script>

A execução desse código gerará a seguinte saída:

getElementById JavaScript

Ao clicar no botão, a função foi acionada, fez o cálculo e inseriu, no campo resultado, o valor da multiplicação. Essa técnica de usar o comando getElementById para procurar um campo e depois usar o complemento value para inserir um valor é muito utilizada. Praticamente todos os formulários de cálculo de compras usam essa técnica ou alguma derivada dela.

Ela é bastante simples, mas muito importante!



Veja Também

Xiaomi vende 52,9 milhões de celulares no segundo trimestre de 2021 e faturamento dispara

A gigante chinesa Xiaomi registrou um aumento de quase 85% no seu faturamento no segundo trimestre de 2021 em comparação ao mesmo período do ano passado. A receita divulgada pela empresa foi de 13,5 bilhões de dólares (algo em torno de 70 bilhões de reais) nos meses de abril a junho deste ano...

Ler Notícia Completa

Galaxy S9 e Galaxy S9 Plus receberão atualização de segurança este mês

A Samsung começou a liberar esta semana, para proprietários dos modelos Galaxy S9 e Galaxy S9 Plus, uma nova atualização de segurança. Por enquanto somente alguns países da Europa receberam o pacote, que deve ser dis...

Ler Notícia Completa

Novas câmeras 'debaixo da tela' da Oppo surpreendem

Para muitos, colocar uma câmera embaixo da tela de um celular era uma tarefa impensável, por conta de diversos problemas técnicos. Os primeiros testes da Oppo que se propuseram a isso geravam imagens de qualidade bastante insatisfatória, já que a captação da luz era prejudicada pela tela. A prim...

Ler Notícia Completa

As memórias DDR5 estão chegando e trarão muitas melhorias

A próxima geração de memórias RAM já possui especificações definidas e promete grande melhoria em relação às atuais DDR4. E o mais importante: mesmo com desempenho bastante superior, elas consumirão menos energia. A tensão de trabalho das memórias DDR5 será de apenas 1.1V contra os 1.2V das atu...

Ler Notícia Completa

Google Chrome consumirá menos memória RAM em breve

O navegador da gigante de buscas da Internet é, sem dúvida, um dos melhores disponíveis, mas é inegável que o consumo de memória RAM por parte dele é exagerado. Este problema já se estende por anos, mas parece que em breve ele terá uma solução. Um novo recurso do Windows 10, chamado SegmentHeap...

Ler Notícia Completa
Ajude o Contém Bits com um cafezinho!

Se você gostou do artigo, se ele lhe foi útil de alguma maneira e você quiser ajudar o Contém Bits, saiba que é simples, fácil e rápido. Basta clicar na imagem do PayPal (ou no cafezinho) e seguir as instruções, em ambiente seguro e com o respaldo do Paypal. Eu agradeço muito! :)


Você gostará destes vídeos!