Question

我正在尝试使用Jquery Mobile，我似乎无法看到我的错误，为什么我的表单元素会返回＆＃39; undefined＆＃39;。我相信我的错误可能是当onclick（）函数在我的Member按钮上运行时，我的表单尚未创建。我知道这段代码可能因为我的HTML中缺少css / js文件而无法运行。我希望有人能够迅速看到我的错误并指出它。

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>

Answer 1

您的功能应该是设置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（）返回＆＃39; undefined＆＃39;用于使用jquery mobile的DOM元素？

1 个答案: