检查按钮文本返回null

Question

这是我的代码：

//Variables

var letters = document.getElementById('qwerty');
var sentence = document.getElementById('phrase');
var missed = 0;
var overlay = document.getElementsByClassName('btn__reset')[0];
const li = document.getElementsByClassName('letter');

//Array with 5 phrases, phrases as strings

var phrases = [
  'cheetah',
  'elephant',
  'skyscraper',
  'plane',
  'snake'
];

//Anchor element event listener to hide overlay

overlay.addEventListener('click', function start() {
  const hideOverlay = document.getElementById('overlay');
  hideOverlay.style.display = 'none';
});

//1st step, Function
function getRandomPhraseAsArray(array) {
  var random = array[Math.floor(Math.random() * array.length)];
  console.log(random.split(''));
  return random.split('');
};

const phraseArray = getRandomPhraseAsArray(phrases);

//2nd step, Function with loop
function addPhraseToDisplay(arr) {
  for (let i = 0; i < arr.length; i++) {
    const ul = document.getElementsByTagName('ul')[0];
    const li = document.createElement('li');
    li.textContent += arr[i];
    ul.appendChild(li);
    li.classList.add('letter');
  }
};
addPhraseToDisplay(phraseArray);

//3rd step checkLetter function
function checkLetter(button) {
  for (let i = 0; i < li.length; i++) {
    if (button.textContent.toLowerCase() === li[i].textContent) {
      li[i].classList.add('show');
    } else {
      return null;
    }
  }
  // return null;
};

//4th step eventlistener to keyboard
window.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    e.target.className = 'chosen';
    e.target.disabled = true;

    const letterFound = checkLetter(e.target);
    console.log(letterFound);

  }
});

// for ( let i = 0; i < btn.length; i++){
// btn[i].addEventListener('click', (event) => {
//   if (event.target.tagName === 'BUTTON') {
//     event.target = event.target.classList.add('chosen');
//   }
// });
// }

<div class="main-container">
  <div id="overlay" class="start">
    <h2 class="title">Wheel of Success</h2>
    <a class="btn__reset">Start Game</a>
  </div>

  <div id="banner" class="section">
    <h2 class="header">Wheel of Success</h2>
  </div>

  <div id="phrase" class="section">
    <ul></ul>
  </div>
  <div id="qwerty" class="section">
    <div class="keyrow">
      <button>q</button><button>w</button><button>e</button><button>r</button><button>t</button><button>y</button><button>u</button><button>i</button><button>o</button><button>p</button>
    </div>
    <div class="keyrow">
      <button>a</button><button>s</button><button>d</button><button>f</button><button>g</button><button>h</button><button>j</button><button>k</button><button>l</button>
    </div>
    <div class="keyrow">
      <button>z</button><button>x</button><button>c</button><button>v</button><button>b</button><button>n</button><button>m</button>
    </div>
  </div>

  <div id="scoreboard" class="section">
    <ol>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
    </ol>
  </div>
</div>

如果我按下右键，则返回null如果我按错了按钮，它也会在控制台中返回null。我的代码出了什么问题？

Answer 1

如果找到该字母，

letterFound需要返回true。它不应该在循环中return，因为它会在找到匹配或不匹配的li时立即返回，但它需要继续搜索（因为一个字母可以重复一句话）。相反，它应该设置一个变量，说明它是否找到了什么，并在最后返回它。

＆＃13;

＆＃13;

//Variables

var letters = document.getElementById('qwerty');
var sentence = document.getElementById('phrase');
var missed = 0;
var overlay = document.getElementsByClassName('btn__reset')[0];
const li = document.getElementsByClassName('letter');

//Array with 5 phrases, phrases as strings

var phrases = [
  'cheetah',
  'elephant',
  'skyscraper',
  'plane',
  'snake'
];

//Anchor element event listener to hide overlay

overlay.addEventListener('click', function start() {
  const hideOverlay = document.getElementById('overlay');
  hideOverlay.style.display = 'none';
});

//1st step, Function
function getRandomPhraseAsArray(array) {
  var random = array[Math.floor(Math.random() * array.length)];
  console.log(random.split(''));
  return random.split('');
};

const phraseArray = getRandomPhraseAsArray(phrases);

//2nd step, Function with loop
function addPhraseToDisplay(arr) {
  for (let i = 0; i < arr.length; i++) {
    const ul = document.getElementsByTagName('ul')[0];
    const li = document.createElement('li');
    li.textContent += arr[i];
    ul.appendChild(li);
    li.classList.add('letter');
  }
};
addPhraseToDisplay(phraseArray);

//3rd step checkLetter function
function checkLetter(button) {
  var found = false;
  for (let i = 0; i < li.length; i++) {
    if (button.textContent.toLowerCase() === li[i].textContent) {
      li[i].classList.add('show');
      found = true;
    }
  }
  return found;
};

//4th step eventlistener to keyboard
window.addEventListener('click', (e) => {
  if (e.target.tagName === 'BUTTON') {
    e.target.className = 'chosen';
    e.target.disabled = true;

    const letterFound = checkLetter(e.target);
    console.log(letterFound);

  }
});

// for ( let i = 0; i < btn.length; i++){
// btn[i].addEventListener('click', (event) => {
//   if (event.target.tagName === 'BUTTON') {
//     event.target = event.target.classList.add('chosen');
//   }
// });
// }

＆＃13;

.letter {
  display: none;
}

.letter.show {
  display: block;
}

＆＃13;

<div class="main-container">
  <div id="overlay" class="start">
    <h2 class="title">Wheel of Success</h2>
    <a class="btn__reset">Start Game</a>
  </div>

  <div id="banner" class="section">
    <h2 class="header">Wheel of Success</h2>
  </div>

  <div id="phrase" class="section">
    <ul></ul>
  </div>
  <div id="qwerty" class="section">
    <div class="keyrow">
      <button>q</button><button>w</button><button>e</button><button>r</button><button>t</button><button>y</button><button>u</button><button>i</button><button>o</button><button>p</button>
    </div>
    <div class="keyrow">
      <button>a</button><button>s</button><button>d</button><button>f</button><button>g</button><button>h</button><button>j</button><button>k</button><button>l</button>
    </div>
    <div class="keyrow">
      <button>z</button><button>x</button><button>c</button><button>v</button><button>b</button><button>n</button><button>m</button>
    </div>
  </div>

  <div id="scoreboard" class="section">
    <ol>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
      <li class="tries"><img src="images/liveHeart.png" height="35px" width="30px"></li>
    </ol>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;