js获取input中的value值报错为null，怎么解决？

青青草原扛把子254

于 2023-10-24 17:17:30 发布

阅读量291

点赞数

文章标签： 1024程序员节 javascript html5

本文链接：https://blog.csdn.net/qq_65085894/article/details/134017081

版权

在js中获取input中的value值，一直报错：

以下为原代码，没写css：

<body>
    <div class="container">
        <form>
            <div class="mb-3">
                <label class="form-label">用户名</label>
                <input type="text" class="form-control username" placeholder="请输入用户名" />
            </div>
            <div class="mb-3">
                <label class="form-label">密码</label>
                <input type="password" class="form-control password" placeholder="请输入密码" />
            </div>
        </form>
        <button type="button" class="btn-login">查询</button>
    </div>
    
    <script>
        // 目标1. 点击登录按钮时，判断用户名和密码长度，并提交数据和服务器通信
        // 1.1 登录按钮-绑定点击事件
        document.querySelector('.btn-login').addEventListener(
            'click', () => {
            let username = document.querySelector('.uername').value
            let password = document.querySelector('.password').value
})

请问该如何解决，一直获取不到value值，显示为null。