Question

所以我有一个简单的HTML表单供用户输入用户名和密码，我正在验证密码是否与JavaScript匹配。但是由于某些原因，我无法显示密码是否与密码匹配。

window.onload = init;

function init(){

function passMatch(){
    console.log("Matching words.");
    var pwd1 = document.getElementById("pwd1").value;
    var pwd2 = document.getElementById("pwd2").value;
    var output1 = document.getElementById("pwd1Hint");
    var output2 = document.getElementById("pwd2Hint");

if (pwd1 === pwd2){
    output1.innerHTML = "Yes!";
    console.log(output1.textContent);
} else {
    output1.innerHTML = "No!";
    console.log(output1.textContent);
}
}
// event handlers
document.getElementById("pwd1").onchange = passMatch;
document.getElementById("pwd2").onchange = passMatch;
}

这是相关的HTML ...

<fieldset name="LoginInfo"><input size="30" placeholder="username"
        name="username" id="username" type="text"> <br>
      <br>
      Password:<br>
      <input size="30" required="required" placeholder="password" name="pwd1"
        id="pwd1" type="password"> <span class="hint" id="pwd1Hint">Password
        is too short (must be at least 8 characters)</span> <br>
      Repeat Password:<br>
      <input size="30" required="required" placeholder="password" name="pwd2"
        id="pwd2" type="password"> <span class="hint" id="pwd2Hint">Passwords
        don't match</span><br>

Answer 1

我打算用有限的信息刺伤这个，但你说了一些非常有趣的事情：

我甚至无法显示其默认文本“密码是 “页面加载
时太短（必须至少8个字符）

但我们的小提琴正在为你效力。这是独立于JavaScript的静态文本。这告诉我你可能有CSS我们没有看到哪些隐藏了你的span。

Answer 2

我的猜测是你的init函数永远不会被调用。尝试在定义下面调用该函数 - 所以只需定义它然后在它下面添加init()。这适用于这个小提琴：

https://jsfiddle.net/awt3dxdj/

然后你可以把它变成一个立即执行的匿名函数（IIFE）。

为什么我的跨度没有显示？简单的密码匹配

2 个答案: