为什么.val（）使用jquery mobile为DOM元素返回'undefined'？

问题描述：

我正在试验Jquery Mobile，我似乎无法看到我的错误，为什么我的表单元素返回'undefined'。我相信我的错误可能是我的表单在我的成员按钮上运行onclick（）函数时尚未创建。我知道这段代码可能不会运行，因为我的HTML中缺少css/js文件。我希望有人能很快看到我的错误并指出它。为什么.val（）使用jquery mobile为DOM元素返回'undefined'？

JS：

$(document).ready(function() { 


}); 

function createMember() { 
    var memberName = $("#memberName").val(); 
    var userName = $('#username').val(); 
    var pass = $('#password').val(); 

    var newMember = new submitMember(memberName, userName, pass); 
    console.log(newMember); 
} 

function submitMember(Name, Username, Password) { 
    this.Name = Name; 
    this.UserName = Username; 
    this.Password = Password; 
}

HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <link rel="stylesheet" href="C:\Users\ali\Desktop\Jquery Mobile\themes\CustomDarkBlue.css" /> 
     <link rel="stylesheet" href="C:\Users\ali\Desktop\Jquery Mobile\themes\jquery.mobile.icons.min.css"/> 
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css"/> 
     <script src="C:\Users\ali\Documents\jquery-2.0.0.min.js"></script> 
     <script src="C:\Users\ali\Desktop\Jquery Mobile\jquery.mobile.custom.js"></script> 
     <script src="C:\Users\ali\Documents\Youtube_ContactsApp\js\VolunteerEfforts.js"></script> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"><!--the meta tag is to ensure that the view size remains 1px to 1 display pixel--> 
    <!--class="ui-btn-active"--> 
    </head> 
     <title>Volunteer Effort</title> 
      <body> 
       <div data-role="navbar" data-grid="c"> 
        <ul> 
         <li><a href="#popupLoginInstitute" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Institution</a></li> 
         <li><a href="#popupLoginMember" data-rel="popup" data-position-to="window" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-icon-check ui-btn-icon-left ui-btn-a" data-transition="pop">Member</a></li> 
         <li><a href="#" class="ui-btn-active">Upcoming Events</a></li> 
         <li><a href="#" class="ui-btn-active">Contact</a></li> 
        </ul> 

         <!--<button type="submit" id="submit" onclick = "createMember()" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign Up</button>--> 

       </div><!--/navbar--> 

       <div data-role="popup" id="popupLoginInstitute" data-theme="a" class="ui-corner-all"> 
        <form> 
         <div style="padding:10px 20px;"> 
          <h3>Sign up as a new Institution</h3> 
          <label for="institution" class="ui-hidden-accessible">Username:</label> 
          <input type="text" name="user" id="institution" value="" placeholder="Institution Name" data-theme="a"> 
          <label for="Address" class="ui-hidden-accessible">Institution Address:</label> 
          <input type="text" name="address" id="address" value="" placeholder="Address" data-theme="a"> 
          <label for="username" class="ui-hidden-accessible">Username:</label> 
          <input type="text" name="user" id="username" value="" placeholder="Username" data-theme="a"> 
          <label for="password" class="ui-hidden-accessible">Password:</label> 
          <input type="password" name="pass" id="password" value="" placeholder="Password" data-theme="a"> 
          <label for="email" class="ui-hidden-accessible">Email:</label> 
          <input type="text" name="email" id="email" value="" placeholder="Email" data-theme="a"> 
          <label for="institutionSelect">Institution Selection:</label> 
          <select name="institutionSelect" id="institutionSelect" data-mini="true"> 
           <option value="1">Religious Organization</option> 
           <option value="2">Food Bank</option> 
           <option value="3">Homeless Shelter</option> 
           <option value="4">Public School</option> 
          </select> 
          <button type="submit" id="submitInstitute" onclick = "createInstitute()" class="ui-btn ui-corner-all ui-shadow ui-btn-b ui-btn-icon-left ui-icon-check">Sign Up</button> 
         </div> 
        </form> 
       </div> 

       <div data-role="popup" id="popupLoginMember" data-theme="a" class="ui-corner-all"> 
        <form> 
         <div style="padding:10px 20px;"> 
          <h3>Sign up as a new Member</h3> 
          <label for="member" >Full Name:</label> 
          <input type="text" name="member" id="memberName" placeholder="Member's Full Name" data-theme="a"> 
          <label for="username" class="ui-hidden-accessible">Username:</label> 
          <input type="text" name="user" id="username" placeholder="Username" data-theme="a"> 
          <label for="password" class="ui-hidden-accessible">Password:</label> 
          <input type="password" name="pass" id="password" placeholder="Password" data-theme="a"> 
          <button type="button" onclick="createMember()" id="submitMember" >Sign Up</button> 
         </div> 
        </form> 
       </div> 
      </body> 
</html>

在你的 “准备” 处理那些'var'声明没有任何意义。它们对处理函数以外的任何内容几乎没有任何影响。 – Pointy

我的不好，我在jsfiddle测试并忘记删除。我havfe做出了正确的编辑 –

你是否来自另一种编程语言而不是Javascript？我正在使用手机，但我认为您的提交会员功能是错误的，尤其是关于此关键字。可能是错误的。祝你好运。 –

答

你的功能应该设置this.propertyName，不设置变量。

function submitMember(name, userName, password) { 
 
    this.name = name 
 
    this.userName = userName; 
 
    this.password = password 
 
} 
 

 
var user1 = new submitMember("A", "B", "C"); 
 
var user2 = new submitMember("FOO", "BAR", "WORLD"); 
 
console.log(user1); 
 
console.log(user2);

仅供参考，是否需要拨打新电话？不太清楚这是如何工作的，或者甚至是需要的。 –

为什么.val（）使用jquery mobile为DOM元素返回'undefined'？

相关推荐