How do I get text input into an input and insert it into a label?

3

I have the following code

<div class="index-login">
            <input id="email" class="input-text" type="email" placeholder="Email"  >
            <button type="submit" class="loginBtn loginBtn--proximo btn btnProximo">Proximo</button>
            <img class="img-division" src="${pageContext.servletContext.contextPath}/images/division.png" />
            <button class="loginBtn loginBtn--facebook btn">Entrar com Facebook</button>
            <button class="loginBtn loginBtn--google btn">Entrar com Google</button>
          </div>
          <div class="index-password">  <!-- Painel de senha -->
            <label class="label-email"> Seu Email Aqui ! </label>
            <input class="input-text" type="password" placeholder="Senha" >
            <button class="loginBtn loginBtn--entrar btn">Entrar</button>
            <img class="img-division" src="${pageContext.servletContext.contextPath}/images/division.png" />
            <button class="loginBtn btnEsqueci loginBtn--esqueci btn">Esqueci minha senha</button>
            <button class="loginBtn btnVolta loginBtn--voltar btn">Voltar</button>
          </div>

I want to get the value entered in the Input Email and put it in the label-email where this is "Your Email Here!" it's possible ?

    
asked by anonymous 10.04.2017 / 17:02

2 answers

4

You can do this to modify while you are writing:

email.addEventListener('keyup', function() {
  document.querySelector('.label-email').innerHTML = this.value;
});
<div class="index-login">
  <input id="email" class="input-text" type="email" placeholder="Email"  >
  <button type="submit" class="loginBtn loginBtn--proximo btn btnProximo">Proximo</button>
  <img class="img-division" src="${pageContext.servletContext.contextPath}/images/division.png" />
  <button class="loginBtn loginBtn--facebook btn">Entrar com Facebook</button>
  <button class="loginBtn loginBtn--google btn">Entrar com Google</button>
</div>
<div class="index-password">  <!-- Painel de senha -->
  <label class="label-email"> Seu Email Aqui ! </label>
  <input class="input-text" type="password" placeholder="Senha" >
  <button class="loginBtn loginBtn--entrar btn">Entrar</button>
  <img class="img-division" src="${pageContext.servletContext.contextPath}/images/division.png" />
  <button class="loginBtn btnEsqueci loginBtn--esqueci btn">Esqueci minha senha</button>
  <button class="loginBtn btnVolta loginBtn--voltar btn">Voltar</button>
</div>

It will monitor the keyup of input email event and modify .label-email as you type the email.

    
10.04.2017 / 17:10
5

document.getElementsByClassName("loginBtn")[0].addEventListener('click', function(event) {
  document.getElementById("txtEmail").innerHTML = document.getElementById("email").value;
});
<div class="index-login">
  <input id="email" class="input-text" type="email" placeholder="Email">
  <button type="submit" class="loginBtn loginBtn--proximo btn btnProximo">Ok</button>
</div>
<div class="index-password">
  <!-- Painel de senha -->
  <label class="label-email">E-mail: <span id="txtEmail"></span> </label>

</div>
    
10.04.2017 / 17:08