获取属性的值。香草JS
目标：我希望有效的图标显示输入何时具有真实的属性。 以及何时false＆amp; amp;的图标无效的图标。输入的长度为1个或更多字符。
（Phoneintupts函数）： 在控制台中，它为每个按键输出“不完整”，直到长度= 10。 当它达到10个字符时，它说出好的，并将有效的属性设置为true。
（formCheck函数）： 取决于长度，添加或删除了一个被禁用的类。 （这是不起作用的部分，因为我正在尝试针对输入的有效属性。通过检查器的属性似乎可以通过Phoneintupts函数完美地工作并运行得很好
）尝试的console.log（）以下内容：
- input.target - 显示正确的输入元素。
- input.target.valid - undefined
- input.target.getAttribute（'valive'） - 返回错误
吗？
https://codepen.io/gold240sx/pen/pen/wvyqppp？ >
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1758b3260f.js" crossorigin="anonymous"></script>
<style>
.hidden {
display: none;
}
</style>
<script>
const formCheck = (input) => {
const chxVer = input.target.parentElement.querySelector('.bool-form-val')
const validIco = chxVer.querySelector('.check')
const invalidIco = chxVer.querySelector('.x')
if (input.target.getAttribute("valid")==true) {
validIco.classList.remove('hidden')
invalidIco.classList.add('hidden')
} else if (input.target.getAttribute("valid")==false) {
input.target.setAttribute('valid', false)
console.log(input.target.valid)
validIco.classList.add('hidden')
invalidIco.classList.remove('hidden')
} else {}
console.log(input.target.getAttribute("valid"))
}
const phoneInputs = document.querySelectorAll('.phone-number');
phoneInputs.forEach((input) => {
const boolFormChecks = document.querySelectorAll('.bool-form-val');
input.addEventListener('keyup', (e) => {
formCheck(e)
//US numbers only
if (input.value.length === 10) {
input.setAttribute('valid', true)
// console.log(input.target.isValid)
console.log('phone number good')
console.log(input.value) //Outputs final phone number
} else {
// console.log(input.validity.valid)
input.setAttribute('valid', false)
// console.log(input.value.length)
console.log("incomplete")
}
})
})
</script>
<title>Document</title>
</head>
<body>
<div class="input">
<input
type="text"
name="phoneNumber"
id="signup-phoneNumber"
placeholder="Phone Number"
class="icoinput phone-number"
maxlength="10"
>
<div class="bool-form-val">
<i class="fa-solid fa-square-check check hidden"></i>
<i class="fa-solid fa-square-x x hidden"></i>
</div>
</div>
</body>
</html>
GOAL: I want the valid icon to show when the input has a valid attribute of true.
and the invalid icon to show when it's false && the input has a length of 1 or more characters.
(phoneInputs function):
in the console, it outputs "incomplete" for every keypress until the length = 10.
When it reaches 10 characters, it says good and sets the valid attribute to true.
(formCheck function):
adds or removes a .hidden class depending upon the length.
(This is the part that isn't working because I'm trying to target the input's valid attribute. The attribute via the inspector seems to be working and functioning perfectly, via the phoneInputs function)
I've tried console.log() the following:
- input.target - shows the correct input element.
- input.target.valid - undefined
- input.target.getAttribute('valid') - returns an error
Any help?
https://codepen.io/gold240sx/pen/wvyqPpP?editors=1111
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/1758b3260f.js" crossorigin="anonymous"></script>
<style>
.hidden {
display: none;
}
</style>
<script>
const formCheck = (input) => {
const chxVer = input.target.parentElement.querySelector('.bool-form-val')
const validIco = chxVer.querySelector('.check')
const invalidIco = chxVer.querySelector('.x')
if (input.target.getAttribute("valid")==true) {
validIco.classList.remove('hidden')
invalidIco.classList.add('hidden')
} else if (input.target.getAttribute("valid")==false) {
input.target.setAttribute('valid', false)
console.log(input.target.valid)
validIco.classList.add('hidden')
invalidIco.classList.remove('hidden')
} else {}
console.log(input.target.getAttribute("valid"))
}
const phoneInputs = document.querySelectorAll('.phone-number');
phoneInputs.forEach((input) => {
const boolFormChecks = document.querySelectorAll('.bool-form-val');
input.addEventListener('keyup', (e) => {
formCheck(e)
//US numbers only
if (input.value.length === 10) {
input.setAttribute('valid', true)
// console.log(input.target.isValid)
console.log('phone number good')
console.log(input.value) //Outputs final phone number
} else {
// console.log(input.validity.valid)
input.setAttribute('valid', false)
// console.log(input.value.length)
console.log("incomplete")
}
})
})
</script>
<title>Document</title>
</head>
<body>
<div class="input">
<input
type="text"
name="phoneNumber"
id="signup-phoneNumber"
placeholder="Phone Number"
class="icoinput phone-number"
maxlength="10"
>
<div class="bool-form-val">
<i class="fa-solid fa-square-check check hidden"></i>
<i class="fa-solid fa-square-x x hidden"></i>
</div>
</div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
您有两个问题：
getAttribute（） >始终返回
字符串，但您将其与true进行了比较，并且此比较始终是错误的。 您应该做input.target.getAttribute（“有效”）==“ true”。对于相反的检查，您应该只在
else中进行此操作，就不需要input.target.target.getAttribute（“有效”）==“ false”（哪个无论如何都不会工作，因为您从未将值设置为false）。您在
keyup侦听器的开头时进行formCheck（e），然后在下一行中设置有效属性。这意味着，如果您键入第10个字符，则检查有效的值，这仍然不正确，然后是您将其设置为true的第10个字符。因此，您应该在功能结束时进行
formCheck（e）。因此，
You have two issues:
getAttribute() always returns a
stringbut you compare it withtrueand this comparison will always be false. You should instead doinput.target.getAttribute("valid") == "true".For the opposite check, you should just do it in the
else, there's no need for ainput.target.getAttribute("valid") == "false"(which won't work anyway since you never set the value tofalse).You do
formCheck(e)at the beginning of thekeyuplistener, before setting thevalidattribute in the next lines. That means if you type the 10th character, you check the value of valid, which is still not true, and THEN since it's the 10th character you set it to true.You should thus do
formCheck(e)at the end of the function.Here's your code with the 2 fixes done: