javascript清空输入框的值问题的解决

最新推荐文章于 2024-07-11 11:36:59 发布

从不卖萌o

最新推荐文章于 2024-07-11 11:36:59 发布

阅读量1.9w

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/yj18637872623/article/details/95365495

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这个问题要记录下，请教了对面的vue大哥才解决。

需求：

编写一个模拟用户登录的功能，正确的账号密码均为123，页面需要两个 input 节点和一个 button 节点。要求：
点击 button 时需要判断用户输入的账号密码是否为 123 ，并给予相应的提示（方式不限）
如果账号或密码错误，将密码所在的 input 节点中的内容清空

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Dom练习</title>
    <style>
        button {
            width: 100px;
            height: 30px;
        }
    </style>
</head>

<body>
    <script type="text/javascript">

        function login() {
            var name = document.getElementById("username").value;
            var password = document.getElementById("password").value;
            if (name == "123" && password == "123") {
                alert("登录成功！");
            } else {
                document.getElementById("password").value = '';
            }
        }

    </script>

    <p>
        <label for="username">账号：</label>
        <input type="text" name="username"  id="username">

    </p>
    <p class="line">
        <label for="username">密码：</label>
        <input type="text" name="password"  id="password">
    </p>

    <button id="login" onclick="login()">登录</button>

</body>

</html>

做这个程序时出现了一个问题，就是input的值无论怎么清空，都留在了浏览器中。请教大哥后才知道：当值赋给password的时候，操作的不是input.value这个值，而是password这个变量的值，导致网页浏览器中元素没有改变。

后续改进：

function login1(){
            var name = document.getElementById("username");
            var password = document.getElementById("password");
            if(name.value == "123" && password.value == "123"){
                alert("登录成功！");
            } else {
                password.value = "";
            }
        }

从不卖萌o

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
javascript清空输入框的值问题的解决

这个问题要记录下，请教了对面的vue大哥才解决。需求：编写一个模拟用户登录的功能，正确的账号密码均为123，页面需要两个 input 节点和一个 button 节点。要求：点击 button 时需要判断用户输入的账号密码是否为 123 ，并给予相应的提示（方式不限）如果账号或密码错误，将密码所在的 input 节点中的内容清空代码：<!DOCTYPE html>&lt...
复制链接

扫一扫

专栏目录