[已解决]关于js中无法获取input标签内的值

致命代码毒师

于 2024-07-05 10:52:21 发布

阅读量282

点赞数 10

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/2201_75697048/article/details/140201819

版权

今天在写js页面的时候发现input标签内的value怎么都获取不了

<body>
    <h3 id="h3">欢迎登录！</h3>
    <div class="alert" role="alert">
        提示消息
    </div>
    <form class="form" action="">
        账号：<input id="ipt" type="text" name="text" placeholder="请输入账号" class="input">
        密码：<input id="ipt" type="text" name="text" placeholder="请输入密码" class="input">
    </form>
    <div class="button">
        <button class="btn">登录</button>
    </div>
    <script>
        let username  = document.querySelector("form").children[0]
        let password = document.querySelector("form").children[1]
        console.log(username.value)
        console.log(password)
    </script>
</body>

如图，获取username.value时控制台没有显示任何数据，而password显示完整数据。

然后就去网上找教程直到看到这个（文章链接：https://segmentfault.com/q/1010000004585753）

问题就是我是直接在页面挂载的时候就打印input输入框的值，而此时没有任何输入值它当然为空，要想获取它里面的值，就放在点击或者提交等函数执行的时候再把它拿到就可以了

<body>
    <h3 id="h3">欢迎登录！</h3>
    <div class="alert" role="alert">
        提示消息
    </div>
    <form class="form" action="">
        账号：<input id="ipt" type="text" name="text" placeholder="请输入账号" class="input">
        密码：<input id="ipt" type="text" name="text" placeholder="请输入密码" class="input">
    </form>
    <div class="button">
        <button class="btn">登录</button>
    </div>
    <script>
        document.querySelector('.btn').addEventListener('click', () => {
            let username  = document.querySelector("form").children[0]
            let password = document.querySelector("form").children[1]
            console.log(username.value)
            console.log(password)
            axios({
            url: "http://hmajax.itheima.net/api/login",
            method: "post",
            data: {
                username,
                password
            }
            }).then((res) => {
                console.log(res)
                })
            })

    </script>
</body>

此时，正常拿到数据