jquery - Jquery 在简单的 html 页面中不起作用

问题描述

这是简单的html注册页面。我的表格是一个部门。当我们点击开始按钮时，我的表单部门需要隐藏，新的聊天页面部门需要可见。我正在使用 node js、socket.io 和 jquery 制作聊天网站。现在我正在使用节点 js 服务器使用该 html 页面。一切都很完美，但是当我按下开始按钮时，我的新部门没有显示，旧部门也没有隐藏。

<!DOCTYPE html>
<html>
<head>
    <title>Telepathy</title>
    <link rel="stylesheet" type="text/css" href="mystyle.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>

    <script>
        // socket = io("http://localhost:11000/");

        $(document).ready(function(){
            $('#b1').click(function(){
                console.log("Inside.");
                $('#regi').hide();
                $('#btn_class').hide();
                $('#chatpage').show();
            });
        });

        function setUsername() {
            console.log("Inside the function.");    
            };
    </script>
</head>

<body background="edit3.jpg" style="margin: 0px; background-repeat: no-repeat;">
    <div id="regi" class="regi">
        <form action="" id="Registration" method="">
            <center>
                <table cellpadding="1" cellspacing="2" id="shadow1">
                    <tr>
                        <td colspan="3"><h1 class="regi_name" style="font-family: TheBlacklist; padding-bottom: 3.5%;font-size: 55px; color: black;"><u>User Details</u></h1></td>
                    </tr>

                    <tr>
                        <td style="padding-top: 2%; padding-right: 25%; padding-bottom: 6%;"><input type="text" name="fname" id="fname" placeholder="Enter First Name"></td>

                        <td rowspan="2"></td>

                        <td style="padding-top: 2%; padding-right: 25%; padding-bottom: 6%;"><input type="text" name="lname" id="lname" placeholder="Enter Last Name"></td>
                    </tr>

                    <tr>
                        <td style="padding-top: 2%; padding-right: 25%; padding-bottom: 6%;"><input type="email" name="email" id="email" placeholder="Enter MailID"/></td>

                        <td style="padding-top: 2%; padding-right: 25%; padding-bottom: 6%;"><input type="text" name="age" id="age" placeholder="Enter Age"/></td>
                    </tr>

                    <tr>
                        <td style="padding-top: 2%; padding-right: 25%; padding-bottom: 8%;">
                            <select name="city" id="city">
                                <optgroup label="Country"></optgroup>
                                <option value="uk">UK</option>
                                <option value="usa">USA</option>
                                <option value="india">India</option>
                                <option value="russia">Russia</option>
                            </select>
                        </td>

                        <td><button id="b1" class="input_btn" onclick="setUsername()" style="padding-top: 2%; padding-bottom: 8%;">Start</button></td>

                        <td style="padding-top: 2%; padding-right: 25%; padding-bottom: 8%;">
                            <select name="gender" id="gender">
                                <optgroup label="Gender"></optgroup>
                                <option value="male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </center>
        </form>
    </div>

    <div id="chatpage" style="width: 20%; height: 80%; border: 2px solid black; display: none;">
        <h2>Peoples</h2><hr>
    </div>
</body>
</html>

标签： jqueryhtml

$(document).ready(function(){ $('#b1').click(function(){ console.log("Inside."); $('#regi').hide(); /// # missed $('#btn_class').hide(); $('#chatpage').show();/// # missed }); });

jquery - Jquery 在简单的 html 页面中不起作用

问题描述

解决方案

推荐阅读