Каждый раз, когда пользователь нажимает кнопку, буква в этой кнопке сравнивается с кнопкой элемента списка.Я тестирую свой код, и кажется, что код в функции checkLetter в моем файле javascript не работает.
Это мой HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Wheel of Success!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>
<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>
</body>
<script src="app.js"></script>
</html>
Это мой Javascript:
let missed=0;
const qwertyID=document.getElementById('qwerty');
const phraseID=document.getElementById('phrase');
const buttonElement=document.getElementsByClassName("btn__reset")[0];
const overLay=document.getElementById('overlay');
phraseArray=["Hey man","What the heck","Western University","Is that cool?","What is that?"];
const ul=document.getElementsByTagName('UL')[0];
//picks random phrase from phraseArray
//breaks phrase into character array
//returns arr---character array to be displayed
function getRandomPhraseAsArray(array) {
index = Math.floor((Math.random() * array.length))
let str=array[index];
let arr=[...str];
console.log(arr);
return arr;
}
//appends each character as list items in ul
//takes arr in parameter
function addPhraseToDisplay(characterArray) {
for (let i=0; i<characterArray.length; i+=1) {
let char=characterArray[i];
listItem=document.createElement('LI');
listItem.textContent=char;
if (char!==" ") {
listItem.className="letter";
}
ul.appendChild(listItem);
}
}
function checkLetter(button) {
letterFound=button.textContent;
letter=document.getElementsByClassName('letter');
for (let i=0;i<letter.length;i+=1) {
if (letter[i].textContent===letterFound) {
console.log("hello");
} else {
return null;
}
}
}
qwertyID.addEventListener('click', (e)=>{
e.target.className="choosen";
const button=e.target;
checkLetter(button);
});
//stores arr (character array) from function into variable
//inputs variable (character array) into new function
let phraseDisplayed=getRandomPhraseAsArray(phraseArray);
addPhraseToDisplay(phraseDisplayed);
//listener event to button to hide overlay
buttonElement.addEventListener('click', ()=> {
overLay.style.display="none";
});
Как видите, «hello» не выводится на консоль.Я использую функцию checkButton в приемнике событий qwertyID, и у меня есть ощущение, что должна быть проблема с областью действия переменной кнопки.
В инструкциях для этого проекта меня попросили ввестиэлемент button в качестве аргумента в моей checkButton функции, поэтому я не могу изменить этот аспект моего кода.Мне было интересно, если кто-нибудь может указать на мою проблему?