javascript - 当我在 HTML 中对 JS 函数使用 onkeyup 时,为什么控制台显示我的函数未定义?

标签 javascript html

我正在尝试制作一个注册表单,其中有一个用于确认您的密码的文本框。

<!DOCTYPE html>
<html>

<head>
  <style>
    label {
      display: inline-block;
      width: 100px;
      margin-bottom: 10px;
    }
    
    body {
      font-family: sans-serif;
    }
  </style>

  <title>Register</title>
</head>

<body>
  <h2>Register</h2>
  <form method="post" action="">
    Username:<br>
    <input type="text" name="username"><br><br> Email Addres: <br>
    <input type="text" name="email"><br><br> Password:
    <br>
    <input type="text" name="password"><br><br> Confirm Password:<br>
    <input type="text" name="passwordconf" onkeyup="passVal()"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>

</html>
<script>
  var pass = document.getElementsByName("password");
  var confPass = document.getElementsByName("passwordconf");

  function passVal() {
    if (pass.value != confPass.value) {
      confPass.setCustomValidity("Passwords don't match");
    } else {
      confPass.setCustomValidity("");
    }
  }
</script>

其目的是,每当释放一个键(onkeyup)时,就会运行一个函数来检查文本框的内容是否相等(passVal)。当我运行它时,将文本添加到两个密码框中,控制台中会显示错误,指出 passVal 未定义。

我尝试使 passval 等于变量

var variableExample = passVal;

并使用onkeyup来调用变量,但这没有什么区别。除了现在控制台说未定义variableExample而不是passVal。我不知道为什么这不起作用。有人知道我该如何解决这个问题吗?

最佳答案

<!DOCTYPE html>
<html>

<head>
  <style>
    label {
      display: inline-block;
      width: 100px;
      margin-bottom: 10px;
    }
    
    body {
      font-family: sans-serif;
    }
  </style>

  <title>Register</title>
</head>

<body>
  <h2>Register</h2>
  <form method="post" action="">
    Username:<br>
    <input type="text" name="username"><br><br> Email Addres: <br>
    <input type="text" name="email"><br><br> Password:
    <br>
    <input type="text" name="password"><br><br> Confirm Password:<br>
    <input type="text" name="passwordconf" onkeyup="passVal()"><br><br>
    <input type="submit" value="Submit">
  </form>
</body>

</html>
<script>
  var pass = document.getElementsByName("password")[0];
  var confPass = document.getElementsByName("passwordconf")[0];

  function passVal() {
    if (pass.value != confPass.value) {
      console.log('Not equal');
    } else {
      console.log('Equal');
    }
  }
</script>

如果通过.getElementsByName()查询,您将获得一个元素数组,如 .getElementsByTagName() 一样。 。请注意,“Element”是复数。

如果你只想要一个元素,只需使用 .getElementsById() .

关于javascript - 当我在 HTML 中对 JS 函数使用 onkeyup 时,为什么控制台显示我的函数未定义?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49185238/

相关文章:

Javascript/Typescript 从函数内部调用外部函数

javascript - 当我知道 jQuery 存在时却找不到它,这让我很困惑

html - 为什么滚动条消失了?

html - HTML/CSS 时间线效果的一些问题

Javascript:window.print();不工作

javascript - 如何将值从 JS 传回 Python

javascript - eccrypto.getPublic() 不适用于 "custom"私钥

javascript - Promise() 在动画完成之前不会延迟功能的问题

html - css 底部工具栏隐藏主要内容

html - 将导航栏右对齐