javascript - 我如何将这个 for 循环变成一个 forEach 循环?
问题描述
大家好^^ 如果之前有人问过这个问题,我深表歉意(尽管我自己找不到以前发布的类似问题......)。另外,让我事先为这个问题的简单性道歉。
这是一款类似于命运之轮的简单网页游戏。通过 js 脚本生成随机报价,用户应该通过屏幕键盘按键猜测该报价。但是,目前我无法将用户点击与引用文本内容的点击进行比较;它返回“未定义”。
我理解(在阅读了此处的一些问题之后) document.querySelectorAll('.letters') 返回“未定义”的原因是因为它是一个数组,并且可能需要一个 forEach 循环,而不是一个 for 循环。
但是,有没有办法增加这个 for 循环,将按钮单击事件目标值与 document.querySelectorAll('.letters') 数组值的值进行比较?如果不是,我将如何将其编写为每个循环?我试图在过去一个小时左右重新编写它,但没有运气:/
不可能将它包含在带有事件侦听器的函数中吗?
我很感激你的时间。
问题代码:
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;
}
}
}
});
推荐阅读
- mysql - 如何使用在 docker 中运行的 wordpress 和 mysql 解决“建立数据库连接时出错”
- python - 在 Python 中通过线程/核心/节点并行化 for 循环
- pandas - matplotlib(或哪个 matplotlib api)何时自动将 Pandas 时间戳转换为 matplotlib 日期?
- javascript - 在 JSON 对象中查找值?
- javascript - 'Doc' 在 IE11 中未定义
- python - 通过网状结构的 Pairgrid 无法按预期工作
- git - 如何解决“拒绝合并不相关的历史”?我试过“git pull origin master --allow-unrelated-histories”
- javascript - 查询选择器所有“显示:无;”的元素
- python - 如何从python中的顺序变量创建数字类别?
- laravel - 通过 Laravel Dusk 测试模拟社交名流登录时出现 InvalidStateException