Uncaught TypeError: Cannot read property 'checked' of undefined (Javascript)
Hej
Jag behöver lite tip hur fixar man problemet som står i Rubriken
Javascript kod:
var prepareGame = document.querySelector('#main_option li');
var help = document.querySelectorAll('#main_option li')[1];
var genre = document.getElementsByClassName('.radiobutton');
var startButton = document.querySelector('.radiobutton+button');
var gamePanelStatus = document.getElementById('gamepanel').style.visibility='hidden';
var helpPanelStatus = document.getElementById('helppanel').style.visibility='hidden';
function showGamePanel(){
gamePanelStatus = document.getElementById('gamepanel').style.visibility='visible';
}
function showHelpPanel(){
helpPanelStatus = document.getElementById('helppanel').style.visibility='visible';
}
function gameStart(){
if(genre[0].checked){
alert('Animal!');
}
}
prepareGame.addEventListener('click',showGamePanel,false);
help.addEventListener('click',showHelpPanel,false);
startButton.addEventListener('click',gameStart, false);
HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Guess Word</title>
<link rel="stylesheet" type="text/css" href="GuessWord.css">
</head>
<body>
<h1>Guessing Words!</h1>
<ul id="main_option">
<li>Start the game</li>
<li>How to play game</li>
</ul>
<div id="gamepanel">
<fieldset>
<input class="radiobutton" type="radio" name="genre" value="animal" checked>Animal</input>
<input class="radiobutton" type="radio" name="genre" value="country">Country</input>
<input class="radiobutton" type="radio" name="genre" value="city">City</input>
<button>Start the game!</button>
</fieldset>
<input type="text"></input>
<input type="submit" value="Send"></input>
<input type="submit" value="Hints" disabled></input>
</div>
<div id="helppanel">
<p>If you want to play the game, click "Start the game". And then you will see three radio boxes.<br/>
Choose one of them and press the "Start the game!" button.<br/>
Then, computer will choose random words automatically, and you should guess which word is computer thinking. If you need help, you can maximum 3 hints.</p>
</div>
<script src="GuessWord.js"></script>
</body>
</html>
I javascript koden ser ni 3 olika funktioner. Finns inga problem med första två. Men funktionen gameStart() fungerar inte.
Jag har lagt en alert metod där för att testa om fungerar funktionen eller inte.
Om man trycker på Start the game! button, datorn ska läsa vilken radio button är aktiv. Så if loopen menar om användaren har valt den första radio button, alert() ska visas. Men, jag får en
error i konsol
Uncaught TypeError: Cannot read property 'checked' of undefined
at HTMLButtonElement.gameStart
Någon som vet hur fixar man det?
Ingen JQuery eller någon annan framework eftersom jag har inte lärt dem.