如何一次 select 两个输入字段并检查它们是否已填写？
[英]How to select two input fields at once and check if they are filled?
问题描述
So I am making a game and I need to check if these two HTML <input> fields have some data before I do an alert();
所以我正在制作游戏，我需要检查这两个 HTML <input>字段在我执行alert(); saying that they won.说他们赢了。 Unfortunately, I don't know how to implement this and I have been stuck at it for hours, please do help, attaching a screenshot for assistance.不幸的是，我不知道如何实现这个，我已经坚持了几个小时，请帮忙，附上截图寻求帮助。
In the image, I want to constantly monitor the 2 empty <input> fields and once there is data IN BOTH, then I want to throw up an alert();在图像中，我想不断监视 2 个空的<input>字段，一旦两者都有数据，我就想抛出一个alert();
Here's what I tried:这是我尝试过的：
var firstLetterField = document.querySelectorAll("input")[0].value.length;
var secondLetterField = document.querySelectorAll("input")[1].value.length;
if (!firstLetterField && !secondLetterField) {
console.log("Please ignore this message: NOT_FILLED...");
} else {
alert("That's right! The word was " + spellingOfWord.join("").toUpperCase() + "! Thanks for playing!");
window.location.href = "/";
}
3 个解决方案
解决方案1
1 2020-08-29 14:05:48
How about just adding a common class to your user input and use querySelectorAll to perform your check?向您的用户输入添加一个常见的 class 并使用querySelectorAll来执行检查怎么样？
eg例如
<html>
<body id="game">
<input data-expected="m" class="user-input" />
<input data-expected="a" class="user-input" />
<div id="keyboard">
<button>d</button>
<button>c</button>
<button>b</button>
<button>a</button>
<button>d</button>
<button>m</button>
<button>e</button>
</div>
</body>
<script>
const inputs = document.querySelectorAll(".user-input");
const keyboard = document
.querySelector("#keyboard")
.querySelectorAll("button");
let inputPosition = 0;
function nextInput() {
inputPosition += 1;
if (inputPosition === inputs.length) {
alert("you won");
}
}
function handleClick(event) {
const input = inputs.item(inputPosition);
const submittedValue = event.target.innerHTML;
if (input.dataset.expected === submittedValue) {
input.value = submittedValue;
setTimeout(nextInput);
}
}
keyboard.forEach((button) => button.addEventListener("click", handleClick));
</script>
</html>
解决方案2
0 2020-08-29 14:08:27
You could register an event-listener and check if your condition is met:您可以注册一个事件监听器并检查您的条件是否满足：
var firstLetterField = document.querySelectorAll("input")[0];
var secondLetterField = document.querySelectorAll("input")[1];
// Function to call when both inputs contain values
function bothReady() {
console.log("bothReady", firstLetterField.value, secondLetterField.value);
}
document.addEventListener("keyup", function (e) {
// Wait for both fields to have values
if (firstLetterField.value.length > 0 && secondLetterField.value.length > 0) {
bothReady();
}
});
解决方案3
0 2020-08-29 14:19:07
Your code just works fine.您的代码工作正常。 There were just some mistakes that I noticed.我注意到了一些错误。
- You tried to use the length to detect if it is empty.您尝试使用长度来检测它是否为空。 You could instead compare it with an empty string.您可以将它与空字符串进行比较。
- You reversed the boolean value using else.您使用 else 反转了 boolean 值。 It looks that does the opposite of what you want.它看起来与您想要的相反。
- In the code you showed you didn't actually defined
spellingOfWord.在您展示的代码中，您实际上并未定义spellingOfWord。 So I did it for you.所以我为你做了。 - The location
"/"is not compatible in every server.位置"/"并非在每个服务器中都兼容。 So I would recomment replacing it by"index.html".所以我建议用"index.html"替换它。
Here is the code that I just created这是我刚刚创建的代码
function input_inputEvent() {
var firstLetterField = document.querySelectorAll("input")[0].value;
var secondLetterField = document.querySelectorAll("input")[1].value;
var thirdLetterField = document.querySelectorAll("input")[2].value;
if (firstLetterField.length != "" && secondLetterField != "") {
alert(
"That's right! The word was " +
[firstLetterField,secondLetterField,thirdLetterField].join("").toUpperCase() +
"! Thanks for playing!"
);
window.location.href = "index.html";
}
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.