当我在HTML中将onkeyup用于JS函数时，为什么控制台会说我的函数未定义？
[英]When I use onkeyup in HTML for a JS function why does console say my function is not defined?
问题描述
I am trying to make a registration form which has a textbox for confirming your password. 
我正在尝试制作一个包含用于确认密码的文本框的注册表。
<!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>
The intent is that whenever a key is released (onkeyup), a function runs which checks to see if the contents of the textboxes are equal (passVal). 目的是每释放一个键（onkeyup），就会运行一个函数，该函数检查文本框的内容是否相等（passVal）。 When I run it add text to both of the password boxes, errors show up in the console saying that passVal is not defined. 当我运行它时，将文本添加到两个密码框中，控制台中显示错误消息，提示未定义passVal。
I tried making passval equal to a variable 我试图使passval等于变量
var variableExample = passVal;
and using onkeyup to call the variable, but this made no difference. 并使用onkeyup调用变量，但这没什么区别。 Except, that now the console said variableExample was not defined instead of passVal. 区别在于，现在控制台未定义variableExample而不是passVal。 I have no clue why this is not working. 我不知道为什么这不起作用。 Anyone know how I might fix this? 有人知道我该如何解决吗？
3 个解决方案
解决方案1
2 已采纳 2018-03-09 01:36:27
<!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>
If you query by .getElementsByName() , you'll get an array of elements, as does .getElementsByTagName() . 如果通过.getElementsByName()查询，则将得到一个元素数组，就像.getElementsByTagName() 。 Notice that "Element" is plural. 请注意，“元素”是复数。
If you only want one element, just use .getElementsById() . 如果只需要一个元素，请使用.getElementsById() 。
解决方案2
2 2018-03-09 02:15:44
The first thing you need to fix here is how you are getting the element value which is by using 您需要在此处修复的第一件事是如何获取元素值，方法是使用
var pass = document.getElementsByName("passwordconf")
which returns an array of all the elements with the name passwordconf . 它返回名称为passwordconf的所有元素的数组。
Adding .value to variable pass will then return undefined because you did not define which element in the array are you trying to get. 然后，将.value添加到变量pass中将返回undefined，因为您没有定义要获取的数组元素。 You can add [0] to get the first element in the array (array indexing always starts count with 0 ) like this: 您可以添加[0]来获取数组中的第一个元素（数组索引始终从0开始计数），如下所示：
pass[0].value;
Note that by doing this, you will not get the passVal is not defined error. 请注意，通过这样做，您将不会获得passVal is not defined错误。
解决方案3
0 2018-03-09 01:34:26
getElementsByName返回元素数组，您应该改用id或获取数组的第一个元素（ pass [0] ）
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.