如何使用输入的文本发送警报

Question

我正在尝试创建一个简单的登录/注册表单，一旦用户点击提交按钮，就会向他们发送警报。警报将向用户显示他们输入的所有信息（姓名、电子邮件、密码）。当我运行应用程序时，警报显示为“未定义”。

这是我的代码：

HTML：

<form>
                    <h2>Sign In</h2>
                    <label>User Name:</label>
                    <input type="text" placeholder="Enter Username" name="username" required>
                    <label>Password:</label>
                    <input type="password" placeholder="Enter Password" name="password" required>
                    <input type="submit" class="submit-button si-submit" value="Sign In">
                    <div id="remember"><input type="checkbox" checked="checked"><span>Remember me</span></div>
                </form>
            </div>
            <div class="sign-up">
                <form>
                    <h2>Sign Up</h2>
                    <label>Name:</label>
                    <input type="text" placeholder="Enter your name" value="" id="name" required>
                    <label>Email:</label>
                    <input type="email" name="email" id="email" required placeholder="Enter a valid email address">
                    <label>Password:</label>
                    <input type="password" placeholder="Enter your password" name="password" id="password" required>
                    <input class="submit-button su-submit" type="submit" id="myButton">
                </form>

JS：

 var userInfo = document.getElementById("name");
 document.getElementById("myButton").addEventListener("click", function() {
    alert(userInfo.value);
 });

Answer 1

您的代码似乎有效...

 var userName = document.getElementById("name"), 
      userEmail = document.getElementById("email"),
      userPassword = document.getElementById("password");
 document.getElementById("myButton").addEventListener("click", function() {
    alert(userName.value);
        alert(userEmail.value);
            alert(userPassword.value);
 });

            <div class="sign-up">
                <form>
                    <h2>Sign Up</h2>
                    <label>Name:</label>
                    <input type="text" placeholder="Enter your name" value="" id="name" required>
                    <label>Email:</label>
                    <input type="email" name="email" id="email" required placeholder="Enter a valid email address">
                    <label>Password:</label>
                    <input type="password" placeholder="Enter your password" name="password" id="password" required>
                    <input class="submit-button su-submit" type="submit" id="myButton">
                </form>
</div>