表單元素值沒有得到存儲在JavaScript變量

Question

我一直在學習JavaScript通過建立一些樣機網站，同時這樣做彈出一個錯誤彈出表單元素沒有被存儲到我的JavaScript變量。我插入了我的HTML代碼模態包含表單和JS代碼的對話框。任何人都可以告訴我我要去哪裏？

document.getElementById("sub").addEventListener("click",store()); 
 
function store(){ 
 
\t var \t userName = document.getElementById("nme").value; 
 
\t var \t emailId = document.getElementById("mail").value; 
 
\t var \t password = document.getElementById("pd").value; 
 
\t var \t rpassword = document.getElementById("rpd").value; 
 
\t console.log(userName); 
 
\t  if (password !== rpassword){ 
 
\t \t alert("your password doesn't match"); 
 
\t  } 
 
\t  else{ 
 
\t \t 
 
\t \t \t localStorage.setItem("name",userName.value); 
 
\t \t \t localStorage.setItem("email",emailId.value); 
 
\t \t \t localStorage.setItem("password",password.value); 
 
\t \t } 
 
\t }

<div class=row> 
 
    <form class="col-xs-12" method="post"> 
 
    <div class="form-group"> 
 
     <input type="text" class="form-control form-design input-lg enable" id="nme" name="user" placeholder="UserName"> 
 
     <input type="text" class="form-control input-lg enable" id="mail" name="mail" placeholder="Email-Id"> 
 
    </div> 
 
    <div class="form-group"> 
 
     <input type="password" class="form-control form-design input-lg enable" id="pd" name="pwd" placeholder="Password"> 
 
     <input type="password" class="form-control input-lg enable" name="rpwd" id="rpds" placeholder="Retype Password"> 
 
     <input type="submit" id="sub" class="btn btn-block btn-lg navi-style lnk" value="SignUp"> 
 
    </div> 
 
    </form> 
 
</div> 
 
<footer class="align">Already a member?<a class="newlnk" data-toggle="modal" href="#login">SignIn</a> 
 
</footer> 
 
</div> 
 
<!--body closed--> 
 
</div> 
 
<!--content closed--> 
 
</div> 
 
<!--Dialog box closed--> 
 
</div> 
 
<!--Model closed--> 
 
</div> 
 
<!--container closed-->

Answer 1

存儲的變量應該是字符串類型，即變種的用戶名應該已經是一個字符串，所以存儲userName.value會導致嘗試存儲「未定義」，因此存儲應該是正確的值沒有「價值」屬性和您的元素ID之一的變種是拼寫錯誤，即

var rpassword = document.getElementById("rpds").value; 

。

例如試試下面的代碼，而不是目前的存儲功能

function store(){ 
 
\t var \t userName = document.getElementById("nme").value; 
 
\t var \t emailId = document.getElementById("mail").value; 
 
\t var \t password = document.getElementById("pd").value; 
 
\t var \t rpassword = document.getElementById("rpds").value; 
 
\t console.log(userName); 
 
\t  if (password !== rpassword){ 
 
\t \t alert("your password doesn't match"); 
 
\t  } 
 
\t  else{ 
 
\t \t 
 
\t \t \t localStorage.setItem("name",userName); 
 
\t \t \t localStorage.setItem("email",emailId); 
 
\t \t \t localStorage.setItem("password",password); 
 
\t \t } 
 
\t }

Answer 2

您正在試圖存儲userName.value而不是userName（依此類推）。 此外，您添加一個事件偵聽器，但實際調用函數存儲而不是引用它。

document.getElementById("sub").addEventListener("click",store); 
function store(){ 
    var userName = document.getElementById("nme").value; 
    var emailId = document.getElementById("mail").value; 
    var password = document.getElementById("pd").value; 
    var rpassword = document.getElementById("rpd").value; 
    console.log(userName); 
     if (password !== rpassword){ 
      alert("your password doesn't match"); 
     } 
     else{ 

      localStorage.setItem("name",userName); 
      localStorage.setItem("email",emailId); 
      localStorage.setItem("password",password); 
     } 
    }