bug解决----无法获取输入框中的值

最新推荐文章于 2024-09-11 15:33:18 发布

< Sunday >

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量310

点赞数 10

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_62563725/article/details/138548849

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

源代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    请输入用户名:
    <input type="text" class="userName">
    请输入密码:
    <input type="password" class="userPwd">
    <button class="login">确认登录</button>

    <script>
        // 获取用户名和密码
        var userName = document.getElementsByClassName("userName")[0]
        var userPwd = document.getElementsByClassName("userPwd")[0]

        // 获取登录按钮
        var login = document.getElementsByClassName("login")[0];

        // 给登录按钮绑定点击事件
        login.onclick = function(){
            // 假定我们设置的用户名分别为：user和123
            if(userName=="user" && userPwd=="123"){
                location.href = "登录成功页面.html";
            }else{
                alert("登录失败")
            }
            console.log(userName,userPwd)
        }
    </script>
</body>
</html>

问题描述

该登录功能无法实现，经过测试发现，问题来源于无法获取到输入框输入的数值。

问题分析

页面一打开，变量userName和变量userPwd就开始获取输入框中的用户名和密码，但是此时两个输入框中都没有输入数据，故userName和userPwd值都为空。
虽然后来又在输入框中输入数据，但是没有把输入框中的数据再次赋值给userName和userPwd，故userName和userPwd的值仍保持为空

解决办法

将userName和userPwd获取输入框中的值的那两行代码放到按钮的点击事件中执行即可。
即当用户点击登录按钮之后，userName和userPwd再获取输入框中的值，再然后判断输入的账号密码是否正确。

修改后代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    请输入用户名:
    <input type="text" class="userName">
    请输入密码:
    <input type="password" class="userPwd">
    <button class="login">确认登录</button>

    <script>
        // 获取登录按钮
        var login = document.getElementsByClassName("login")[0];
        
        // 给登录按钮绑定点击事件
        login.onclick = function(){
            // 获取用户名和密码(注：获取到的用户名和密码都是字符串类型。)
            var userName = document.getElementsByClassName("userName")[0].value
            var userPwd = document.getElementsByClassName("userPwd")[0].value
            // 假定我们设置的用户名分别为：user和123
            if(userName=="user" && userPwd=="123"){
                location.href = "登录成功页面.html"; //这里填写你需要登录成功所跳转的页面的路径
            }else{
                alert("登录失败")
            }
            console.log(userName,userPwd)
        }
    </script>
</body>
</html>

参考资料

获取不到input内自己输入的值

< Sunday >

关注

10
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
bug解决----无法获取输入框中的值

页面一打开，变量userName和变量userPwd就开始获取输入框中的用户名和密码，但是此时两个输入框中都没有输入数据，故userName和userPwd值都为空。虽然后来又在输入框中输入数据，但是没有把输入框中的数据再次赋值给userName和userPwd，故userName和userPwd的值仍保持为空。即当用户点击登录按钮之后，userName和userPwd再获取输入框中的值，再然后判断输入的账号密码是否正确。该登录功能无法实现，经过测试发现，问题来源于无法获取到输入框输入的数值。
复制链接

扫一扫

专栏目录