Question

我有一个作业说： “在表单中输入电子邮件地址后，给定的电子邮件应显示在此div标签<div class="your-mail"></div>中”

HTML如下所示：

    <div class="wrap">
        <main>  
            <h2>Newsletter abonnieren</h2>
            <br>
            <div>
                <a class="help" href="">Need Help?</a><br>
                <p class="explanation">...............</p>
            </div>
            <br>
            <form name="subscription" action="test.html" method="post">
                <input class="email-abonieren" type="text" name="email" placeholder="Ihre Email"><br>
                <input class="submit-button" type="button" value="Newsletter abbonieren">
            </form>
            <br>
            <div class="your-mail"></div>
        </main>
    </div>

这是我到目前为止所拥有的：

var emailField = document.getElementsByName("email");
var newsletter = document.querySelector('.submit-button');
newsletter.addEventListener('click', function() {});`

谢谢

Answer 1

newsletter.addEventListener('click', function() {
  document.querySelector(".your-mail").innerText = emailField[0].value
})

Answer 2

您可以为此使用“ onkeyup”事件。

<div class="wrap">
        <main>  
            <h2>Newsletter abonnieren</h2>
            <br>
            <div>
                <a class="help" href="">Need Help?</a><br>
                <p class="explanation">...............</p>
            </div>
            <br>
            <form name="subscription" action="test.html" method="post">
                <input class="email-abonieren" type="text" name="email" placeholder="Ihre Email" onkeyup="myFunction(this.value)"><br>
                <input class="submit-button" type="button" value="Newsletter abbonieren">
            </form>
            <br>
            <div class="your-mail"></div>
        </main>
    </div>
    <script>
       function myFunction(value) {
          $(".your-mail").text(value);
      }
    </script>

读取输入标签上的输入值

2 个答案: