How to take text inserted into an input and insert it into a label ?

Question

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 take the value entered in Input Email and put in the label-email where this "Your email here !" is possible ?

Answer 1

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>

Answer 2

You can do so to go modifying 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>

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