入力されたテキストを使用してアラートを送信する方法

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>