为什么自定义的showPass函数执行时返回null？

• 调用showPass函数时传入的userid、showPassButton未加引号，浏览器会将其识别为DOM元素对象，而非你预期的ID字符串
• 函数内部调用document.getElementById时，给参数加了引号变成了固定字符串'passId'、'btnId'，实际是查询页面中id为passId、btnId的元素，这类元素不存在，所以返回null

你可以任选以下一种方式修复：

方式1：按ID查询逻辑修正 #

1. 给onclick调用时的参数加上引号，传入正确的ID字符串
2. 移除函数内部getElementById参数的引号，使用传入的变量值查询
   完整修复代码如下：

<input id="userid" type="password" value="12345">
<button id="showPassButton" onclick="showPass('userid', 'showPassButton')">Show</button>
    
<script>
       function showPass(passId, btnId) {  
            const pass = document.getElementById(passId);
            console.log(pass);
            const btn = document.getElementById(btnId);
            console.log(btn);
            // 切换密码显示逻辑可在此补充：pass.type = pass.type === 'password' ? 'text' : 'password'
        }
</script>

方式2：直接使用传入的DOM元素 #

浏览器内联事件中直接写元素ID会自动获取到对应的DOM对象，你可以直接使用传入的对象，无需额外查询DOM：

<input id="userid" type="password" value="12345">
<button id="showPassButton" onclick="showPass(userid, showPassButton)">Show</button>
    
<script>
       function showPass(passEl, btnEl) {  
            console.log(passEl);
            console.log(btnEl);
        }
</script>

内容的提问来源于stack exchange，提问作者Akhlesh Kumar