Jquery在简单html页面中不起作用_Jquery_Html

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

jquery html

Jquery在简单html页面中不起作用,jquery,html,Jquery,Html,这是简单的html注册页面。我的表格在一个分区。当我们点击开始按钮时，我的表单分区需要隐藏，新的聊天页面分区需要可见。我正在使用NodeJS、socket.io和jquery创建聊天网站。现在我正在使用NodeJS服务器使用html页面。一切都很完美，但当我按下开始按钮时，我的新分区并没有显示，旧分区也并没有隐藏 <!DOCTYPE html> <html> <head> <title>Telepathy</title>

这是简单的html注册页面。我的表格在一个分区。当我们点击开始按钮时，我的表单分区需要隐藏，新的聊天页面分区需要可见。我正在使用NodeJS、socket.io和jquery创建聊天网站。现在我正在使用NodeJS服务器使用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>


心灵感应
//套接字=io（“http://localhost:11000/");
$（文档）.ready（函数（）{
$（'#b1'）。单击（函数（）{
控制台日志（“内部”）；
$（'#regi'）.hide（）；
$（'btn_class'）.hide（）；
$（'#chatpage'）.show（）；
});
});
函数setUsername（）{
log（“函数内部”）；
};
用户详细信息
英国
美国
印度
俄罗斯联邦
开始
男性的
女的
人民

试试这个

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

您错过了此处的#for id selector。

console中有错误吗？

$（'chatpage'）

和

regi

错误的选择器您错过了id选择器中的一些“#”。仍然不工作。