I don't understand why in the if statement it will execute the code for the input being different and say incorrect even when they are the same. I tried checking for the console.log in the console and it's not giving any errors. I know this isn't the case, but it's like it is not recognizing or reading the code. Sorry for long explanation I'm a beginner and its hard to explain what I'm trying to say.
Here is the code:
let output = document.querySelector("#typedWord");
let ansOutput = document.querySelector('[userOut]');
const display = document.querySelector("#wordDisplay");
const wordList = ['Carvedilol', 'Histrelin', 'Kadcyla', 'Mavyret', 'Paracetamol', 'Raloxifene', 'Saxagliptin'];
const random = Math.floor(Math.random() * wordList.length);
window.addEventListener('keydown', focusIn);
function focusIn(event) {
const wordList = ['Carvedilol', 'Histrelin', 'Kadcyla', 'Mavyret', 'Paracetamol', 'Raloxifene', 'Saxagliptin'];
const random = Math.floor(Math.random() * wordList.length);
const ranWord = wordList[random];
const display = document.querySelector("#wordDisplay");
let output = document.querySelector("#typedWord");
if (event.keyCode === 32) {
display.innerHTML = ranWord;
setTimeout(time, 6000);
}
if (output.addEventListener('keydown', handleKeyUp));
function time(event) {
const timeDisplay = document.querySelector("#timeDisplay");
timeDisplay.innerHTML = "Time Up!";
console.log("time event")
}
function handleKeyUp(event) {
let ansOutput = document.querySelector('[userOut]')
if (event.keyCode === 13 && ansOutput === ranWord) {
event.preventDefault();
event.target.blur();
timeDisplay.innerHTML = "Correct!";
console.log('executed')
}
if (event.keyCode === 13 && ansOutput !== ranWord) {
event.preventDefault();
event.target.blur();
timeDisplay.innerHTML = "Incorrect!";
console.log('executed')
}
}
}<header>
<h1>Type A Word Challenge!</h1>
</header>
<main>
<div id="wordDisplay"></div>
<br>
<div id="timeDisplay"></div>
<br>
<label>Type Word Here</label>
<input type="text" id="typedWord" name="userOut">
<h3>Press Spacebar to Begin</h3>
</main>