JS提问,为什么input 密码显示隐藏不成功

大佬们,我点击密码框右侧 小眼睛,但是没反应,请问怎么回事?

 <style>
        #pwd{width:200px;height:30px;background:url('eye开.png') no-repeat right ;background-size: contain;}
    </style>
</head>
<body>
    密码: <input id="pwd"  type="password"  placeholder="请输入密码" >   
    <script>
        var pwd=document.getElementById("pwd")
        var img=document.getElementById("pwd").style.backgroundImage
        img.onclick=function(){
            if(pwd.type == "password"){                    
                pwd.type = 'text'
                img.src = 'eye闭.png'
            }else{
                pwd.type = 'password'
                img.src = 'eye开.png'
            }
        }
    </script>

 

给pwd dom对象添加事件,img是字符串哪来的事件。而且设置pwd的backgroundImage

<style>
    #pwd {
        width: 200px;
        height: 30px;
        background: url('eye开.png') no-repeat right;
        background-size: contain;
    }
</style>
</head>
<body>
    密码: <input id="pwd" type="password" placeholder="请输入密码">
    <script>
        var pwd = document.getElementById("pwd")
        pwd.onclick = function () {
            if (pwd.type == "password") {
                pwd.type = 'text'
                pwd.style.backgroundImage = 'url(eye闭.png)';
            } else {
                pwd.type = 'password'
                pwd.style.backgroundImage = 'url(开闭.png)';
            }
        }
    </script>

 

 var img=document.getElementById("pwd").style.backgroundImage

这个是获取了个啥,获取不到元素当然触发不了onclick事件,建议你图片有具体元素并通过定位定到该位置

 密码框显示是是明文吗?不可能吧。