[英]How would I would I turn this for loop into a forEach loop?
大家好^^ 如果之前有人问过这个问题,我深表歉意(尽管我自己找不到以前发布的类似问题......)。 另外,让我事先为这个问题的简单性道歉。
这是一款类似于命运之轮的简单浏览器游戏。 用户应该通过屏幕键盘按键猜测的 js 脚本生成随机报价。 但是,目前我无法将用户点击与引用文本内容的点击进行比较; 它返回“未定义”。
我明白(在阅读了这里的一些问题之后)document.querySelectorAll('.letters') 返回“undefined”的原因是因为它是一个数组,并且可能需要一个 forEach 循环,而不是一个 for 循环。
但是,有没有办法增加此 for 循环以将按钮单击事件目标值与 document.querySelectorAll('.letters') 数组值的值进行比较? 如果没有,我将如何将其编写为 for 每个循环? 我试图在过去一个小时左右重新编写它,但没有运气:/
是否无法将其包含在具有事件侦听器的函数中?
我很欣赏你的时间。
问题代码:
qwerty.addEventListener('click', function (event) {
if ( event.target.tagName === "BUTTON" ) {
event.target.className = "chosen";
for( let i = 0; i < letters.length; i++ ) {
if( event.target.innerText === letters.textContent.toLowerCase() ) {
letters.className = 'show';
matched += 1;
}
}
}
});
完整代码:
//Keyboard and game element variables
const qwerty = document.getElementById('qwerty');
const phrase = document.getElementById('phrase');
const keyLetters = document.querySelectorAll('.keyrow button').innerText;
//hidden letters of phrase
const letters = document.querySelectorAll('.letters');
//Game score
const missed = 0;
const matched = 0;
//Start button (hides start screen overlay and begins game)
const startGame = document.querySelector('.btn_reset');
startGame.addEventListener('click', function () {
document.querySelector('.start').style.display = 'none';
});
//Game quotes
const quotes = [
["René Descartes" , "I think therefore I am"],
["Friedrich Nietzsche" , "What does not kill me makes me stronger"],
["Socrates" , "The unexamined life is not worth living"],
["Sir Winston Churchill" , "If you are going through hell keep going"],
["Winnie the Pooh" , "Doing nothing often leads to the very best of something"],
["Aldous Huxley" , "Never have so many been manipulated so much by so few"],
["Albert Einstein" , "The most beautiful experience we can have is the mysterious"]
];
//Generate random quote
const getRandomPhraseAsArray = () => {
//create random number between 1 - 7 for quote selection
let randNum = Math.floor( Math.random() * (quotes.length) );
//retrieve object value (quote) with random number
let randQuote = quotes[randNum][1];
//select the ul .phrase div
const ul = document.querySelector('#phrase ul');
//Append to li element created in const li
randQuote = randQuote.toString().split("");
//iterate though each string value in randQuote, create an li element
//then set the innerText of the li to the string value
for( let i = 0; i < randQuote.length; i++ ) {
const li = document.createElement("li");
ul.appendChild(li);
li.innerText = randQuote[i];
if ( randQuote[i] != " " ) {
li.className = "letter";
} else {
li.className = "space";
}
};
};
getRandomPhraseAsArray();
//keypress function
qwerty.addEventListener('click', function (event) {
if ( event.target.tagName === "BUTTON" ) {
event.target.className = "chosen";
for( let i = 0; i < letters.length; i++ ) {
if( event.target.innerText === letters.textContent.toLowerCase() ) {
letters.className = 'show';
matched += 1;
}
}
}
});
固定的。 StackSlave 是正确的。 for/of 循环是遍历数组所需的。
qwerty.addEventListener('click', function (event) {
if ( event.target.tagName === "BUTTON" ) {
event.target.className = "chosen";
for( const letter of letters ) {
if( event.target.innerText === letter.textContent.toLowerCase() ) {
letter.className = 'show';
matched += 1;
}
}
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.