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>
如果用户按“Enter”重新开始，我会尝试增加行数，与容器和容器 2 中的情况相同。我的结果是在第一行中一切正常，但是当焦点跳转到第二行中的第一个输入时，当用户按下字母时（当 myLength = 1 时）我输入的焦点不会改变。我需要一些建议如何解决这个问题。非常感谢您的帮助。