英文:
Trying to repeat functions to jump between inputs
问题
以下是您的JavaScript代码的中文翻译部分：
const ignoreOtherSymbols = document.querySelector(".word .first")
let counter = 1
let word = ''
let fifthValue = ''
let row = 0
let container = document.getElementsByClassName("word")[row]
let container2 = document.getElementsByClassName("word")[row]
let inputs = document.getElementsByClassName('first')[0] // class name as number in html and increment this when user lose in press enter
function isLetter(letter) {
return /^[a-zA-Z]$/.test(letter)
}
ignoreOtherSymbols.addEventListener("keydown", function (event) {
if (!isLetter(event.key)) {
event.preventDefault()
}
})
container.onkeyup = function(event) {
let target = event.srcElement || event.target
let myLength = target.value.length
if (isLetter(event.key) && counter < 5) {
word += target.value
}
if (event.key === 'Enter' && counter == 5) {
row++
fifthValue = target.value
const wordArray = word.split('')
wordArray[4] = fifthValue
let newWord = wordArray.join('')
console.log(row)
console.log(newWord)
const apiUrl = 'https://words.dev-apis.com/word-of-the-day?puzzle=1337'
fetch(apiUrl)
.then(response => response.json())
.then(data => {
console.log(data);
if (data.word === newWord) {
console.log('You win')
}
else {
console.log('Try again')
console.log(row)
if (document.getElementsByClassName("word")[row]) {
counter = 1
word = ''
fifthValue = ''
// I need to connect this if else (mylength) to jump between inputs with the same row
inputs.focus()
}
}
})
.catch(error => {
console.error(error)
})
}
if (event.key === 'Backspace') {
target.value = ''
}
if (myLength === 1) {
while (target = target.nextElementSibling) {
if (target.tagName.toLowerCase() === "input") {
if (isLetter(event.key)) {
target.focus()
counter++
}
break
}
}
}
console.log(counter)
console.log(word)
}
container2.onkeydown = function(event) {
let target = event.srcElement || event.target
let myLength = target.value.length
if (isLetter(event.key) && counter === 5) {
target.value = target.value.slice(0, -1)
}
if (myLength === 0) {
while (target = target.previousElementSibling) {
if (target.tagName.toLowerCase() === "input") {
if (event.key === 'Backspace') {
target.focus()
counter--
target.value = ''
word = word.slice(0, -1)
}
break
}
}
}
}
希望这能帮助您理解代码并解决您的问题。如果您需要更多帮助，请随时提出。
英文:
const ignoreOtherSymbols = document.querySelector(".word .first")
let counter = 1
let word = ''
let fifthValue = ''
let row = 0
let container = document.getElementsByClassName("word")[row]
let container2 = document.getElementsByClassName("word")[row]
let inputs = document.getElementsByClassName('first')[0] // class name as number in html and increment this when user lose in press enter
function isLetter(letter) {
return /^[a-zA-Z]$/.test(letter)
}
ignoreOtherSymbols.addEventListener("keydown", function (event) {
if (!isLetter(event.key)) {
event.preventDefault()
}
})
container.onkeyup = function(event) {
let target = event.srcElement || event.target
let myLength = target.value.length
if (isLetter(event.key) && counter < 5) {
word += target.value
}
if (event.key === 'Enter' && counter == 5) {
row++
fifthValue = target.value
const wordArray = word.split('')
wordArray[4] = fifthValue
let newWord = wordArray.join('')
console.log(row)
console.log(newWord)
const apiUrl = 'https://words.dev-apis.com/word-of-the-day?puzzle=1337'
fetch(apiUrl)
.then(response => response.json())
.then(data => {
console.log(data);
if (data.word === newWord) {
console.log('You win')
}
else {
console.log('Try again')
console.log(row)
if (document.getElementsByClassName("word")[row]) {
counter = 1
word = ''
fifthValue = ''
// I need to connect this if else (mylength) to jump between inputs with the same row
inputs.focus()
}
}
})
.catch(error => {
console.error(error)
})
}
if (event.key === 'Backspace') {
target.value = ''
}
if (myLength === 1) {
while (target = target.nextElementSibling) {
if (target.tagName.toLowerCase() === "input") {
if (isLetter(event.key)) {
target.focus()
counter++
}
break
}
}
}
console.log(counter)
console.log(word)
}
container2.onkeydown = function(event) {
let target = event.srcElement || event.target
let myLength = target.value.length
if (isLetter(event.key) && counter === 5) {
target.value = target.value.slice(0, -1)
}
if (myLength === 0) {
while (target = target.previousElementSibling) {
if (target.tagName.toLowerCase() === "input") {
if (event.key === 'Backspace') {
target.focus()
counter--
target.value = ''
word = word.slice(0, -1)
}
break
}
}
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" /> <!--for emoticons, ASCII don't give emoticons-->
<meta name="viewport" content="width=device-width, initial-scale.0" /> <!--for view side on smartphone-->
<title>Word Master</title> <!--title of my side-->
<link rel="stylesheet" href="index.css" />
</head>
<body class="page">
<h1 class="logo">Word Masters</h1>
<div class="line"></div>
<div class="nothing"></div>
<div class="letter">
<div class="firstWord word">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</div>
<div class="secondWord word">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
</div>
<div class="thirdWord word">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</div>
<div class="fourthWord word">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
</div>
<div class="fifthWord word">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
</div>
<div class="sixthWord word">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
</div>
</div>
<script src="./wordMaster.js"></script>
</body>
</html>
I try to increment number of row if user press 'Enter' to start again the same what is going in container and container2. My result is that in first row everything is ok, but when focus jump to first input in second row, focus of my input don't change when user press letter (when myLength = 1). I need some advice how to resolve this. Thank you a lot for help.
答案1
得分: 0
以下是您要求的代码部分的翻译：
const ignoreOtherSymbols = document.querySelector(".word .first");
let counter = 1;
let word = '';
let fifthValue = '';
let row = 0;
function isLetter(letter) {
return /^[a-zA-Z]$/.test(letter);
}
ignoreOtherSymbols.addEventListener("keydown", function (event) {
if (!isLetter(event.key)) {
event.preventDefault();
}
});
addKeyUpEventListener(row); // 在行 0 添加事件监听器
function addKeyUpEventListener(row) {
console.log('row', row);
let inputs = document.getElementsByClassName('first')[row]; // HTML 中的类名对应行数，当用户按下回车键时递增
let container = document.getElementsByClassName("word")[row];
container.onkeyup = function (event) {
let target = event.srcElement || event.target;
let myLength = target.value.length;
if (isLetter(event.key) && counter < 5) {
word += target.value;
}
if (event.key === 'Enter' && counter === 5) {
row++;
fifthValue = target.value;
const wordArray = word.split('');
wordArray[4] = fifthValue;
let newWord = wordArray.join('');
console.log(row);
console.log(newWord);
const apiUrl = 'https://words.dev-apis.com/word-of-the-day?puzzle=1337';
fetch(apiUrl)
.then(response => response.json())
.then(data => {
console.log(data);
if (data.word === newWord) {
console.log('You win');
} else {
console.log('Try again');
console.log(row);
if (document.getElementsByClassName("word")[row]) {
counter = 1;
word = '';
fifthValue = '';
inputs.focus();
}
}
addKeyUpEventListener(row); // 在行 n 添加事件监听器
})
.catch(error => {
console.error(error);
});
}
if (event.key === 'Backspace') {
target.value = '';
}
if (myLength === 1) {
while (target = target.nextElementSibling) {
if (target.tagName.toLowerCase() === "input") {
if (isLetter(event.key)) {
target.focus();
counter++;
}
break;
}
}
}
console.log(counter);
console.log(word);
}
}
请注意，我已经将您提供的代码翻译成了中文，并根据您的要求省略了任何额外的内容。如果您有任何其他翻译需求，请随时提出。
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
const ignoreOtherSymbols = document.querySelector(".word .first")
let counter = 1
let word = ''
let fifthValue = ''
let row = 0
function isLetter(letter) {
return /^[a-zA-Z]$/.test(letter)
}
ignoreOtherSymbols.addEventListener("keydown", function (event) {
if (!isLetter(event.key)) {
event.preventDefault()
}
})
addKeyUpEventListner(row); // add eventlistner at row 0
function addKeyUpEventListner(row) {
console.log('row', row)
let inputs = document.getElementsByClassName('first')[row] // class name as number in html and increment this when user lose in press enter
let container = document.getElementsByClassName("word")[row]
container.onkeyup = function(event) {
let target = event.srcElement || event.target
let myLength = target.value.length
if (isLetter(event.key) && counter < 5) {
word += target.value
}
if (event.key === 'Enter' && counter == 5) {
row++
fifthValue = target.value
const wordArray = word.split('')
wordArray[4] = fifthValue
let newWord = wordArray.join('')
console.log(row)
console.log(newWord)
const apiUrl = 'https://words.dev-apis.com/word-of-the-day?puzzle=1337'
fetch(apiUrl)
.then(response => response.json())
.then(data => {
console.log(data);
if (data.word === newWord) {
console.log('You win')
}
else {
console.log('Try again')
console.log(row)
if (document.getElementsByClassName("word")[row]) {
counter = 1
word = ''
fifthValue = ''
// I need to connect this if else (mylength) to jump between inputs with the same row
inputs.focus()
}
}
addKeyUpEventListner(row); // add eventlistner at row n
})
.catch(error => {
console.error(error)
})
}
if (event.key === 'Backspace') {
target.value = ''
}
if (myLength === 1) {
while (target = target.nextElementSibling) {
if (target.tagName.toLowerCase() === "input") {
if (isLetter(event.key)) {
target.focus()
counter++
}
break
}
}
}
console.log(counter)
console.log(word)
}
}
<!-- language: lang-html -->
<h1 class="logo">Word Masters</h1>
<div class="line"></div>
<div class="nothing"></div>
<div class="letter">
<div class="firstWord word">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</div>
<div class="secondWord word">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</div>
<div class="thirdWord word">
<input type="text" maxlength="1" class="first">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
<input type="text" maxlength="1">
</div>
<div class="fourthWord word">
<input maxlength="1" class="first">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
</div>
<div class="fifthWord word">
<input maxlength="1" class="first">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
</div>
<div class="sixthWord word">
<input maxlength="1" class="first">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
<input maxlength="1">
</div>
</div>
<!-- end snippet -->
separate addEventlistener with row as a parameter as a function
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论