Como pegar o conteúdo de um INPUT text e adicionar em uma DIV usando o ID do seu input:

Como pegar o conteúdo de um INPUT text e adicionar em uma DIV



Como pegar o conteúdo de um input text Javascript.


Para estrear o quadro Criando sites eu vou mostrar para vocês um comando bom para você que quer personalizar um pouco seu site.



Este Tutorial foi feito a pedido do meu amigo Anonimo (Tímido de mais).

Para pegar o conteúdo de um um formulário Input você precisa usar o comando GetElement do Javascript


1º Pegando o conteúdo usando a ID do seu input:


<input id="demo" value="Resultado">

  • Vamos usar esta sintaxe

document.getElementById("demo");



  • Vamos salvar este conteúdo em uma variável "x" onde X pode ser qualquer nome que você quiser eu vou usar o nome "pegarConteudo".
var pegarConteudo=document.getElementById("demo");


2º Após capturar o valor que você precisa vamos atribuir este valor a uma <div>


<div id='idDaDiv'></div>

Onde IdDaDiv pode ser o nome que você quiser, mas usaremos como base este nome...

  • Vamos usar este código para atribuir o conteúdo a esta Div.
document.getElementById("idDaDiv").innerHTML = pegarConteudo.value;

.InnerHTML Significa que vamos adicionar dentro do html da div exemplo:
<div>Conteúdo do .innerHTML é tudo que esta aqui dentro </div>

.Value Significa que o que estamos pegando é o Valor:
<input value="Conteúdo do .value é tudo que esta aqui dentro"/>


3° O Código final Então é este:


<div id='idDaDiv'></div>

<input id='demo' type='text' value='Valor que ficará dentro da div'/>

<script>
var pegarConteudo = document.getElementById("demo");

document.getElementById("idDaDiv").innerHTML = pegarConteudo.value;

</script>

Renderizado ficará assim:

Div com o resultado

Input com o conteúdo



Duvidas comente aqui em baixo que respondo rapidinho...


← ANTERIOR PROXIMA → INICIO

Comente com o Facebook

Um comentário :

  1. Anonimo(Amigo Tímido)14 de abril de 2016 11:55

    Wow!
    Muito obrigado cara!
    Explicou direitinho passo a passo.

    Gostei muito, parabéns!

    ResponderExcluir

COMENTE SEM SPAM !

 

Além do site temos uma página de frases
Curta nossa página antes.

Login