Как бы я превратил это для l oop в forEach l oop? - PullRequest
Новая
       14

Как бы я превратил это для l oop в forEach l oop?

1 голос
/ 28 февраля 2020

Hello All ^^ Я прошу прощения, если это было задано ранее (хотя я не смог найти ранее опубликованный, похожий вопрос сам ...). Кроме того, позвольте мне заранее извиниться за простоту этого вопроса.

Это простая браузерная игра, похожая на колесо фортуны. Случайная цитата генерируется с помощью скрипта js, который должен угадать пользователь с помощью клавиш на экране. Тем не менее, я не могу сравнить пользовательский клик с кликом в текстовом контенте цитаты; он возвращает "undefined".

Я понимаю (после прочтения некоторых вопросов здесь), что причина, по которой document.querySelectorAll ('. letters') возвращает "undefined", заключается в том, что это массив, и, скорее всего, требует forEach l oop, а не для l oop.

Однако есть ли способ увеличить это значение для l oop, чтобы сравнить целевое значение события нажатия кнопки со значением массива document.querySelectorAll ('. Letters')? Если нет, как бы я записал это как a для каждого l oop? Я пытался переписать его как таковой в течение последнего часа или около того, но мне не повезло: /

Не возможно ли включить это в функцию с прослушивателем событий?

Я делаю цените ваше время.

ссылка на репо на github (https://github.com/shonb6570/Tech-Degree-Project-6/settings).

код задачи: 

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;
             }
        }
    }
});

1 Ответ

0 голосов
/ 28 февраля 2020

Fixed. StackSlave был правильным. Для / из l oop было то, что требовалось для перебора массива. 

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;
         }
    }
}

});

...