Uncaught TypeError: Cannot read property 'checked' of undefined (Javascript)

Permalänk

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.

Permalänk
Medlem

@ProgrammeringElev:
Undefined betyder att en varibel inte är satt. I ditt fall så är det att document.getElementsByClassName('.radiobutton'); inte fungerar. I vanlig JS ska man inte ha . eller # osv i queryn för class eller id (det är JQuery). Ta bort punkten före så ska det gå bättre.

Permalänk
Skrivet av DegJ:

@ProgrammeringElev:
Undefined betyder att en varibel inte är satt. I ditt fall så är det att document.getElementsByClassName('.radiobutton'); inte fungerar. I vanlig JS ska man inte ha . eller # osv i queryn för class eller id (det är JQuery). Ta bort punkten före så ska det gå bättre.

Aaaah!
Visste inte det!
Tack så mycket!
Jag tänkte man måste ha punkten om man använder className
tack!

Permalänk
Skrivet av DegJ:

@ProgrammeringElev:
Undefined betyder att en varibel inte är satt. I ditt fall så är det att document.getElementsByClassName('.radiobutton'); inte fungerar. I vanlig JS ska man inte ha . eller # osv i queryn för class eller id (det är JQuery). Ta bort punkten före så ska det gå bättre.

Kan ni hjälpa med den små fråga också?

Om man ska ta någon värde från fältet slumpmässigt med hjälp av Math.floor ,

Math.floor((Math.random()*Array.length)+1); är den rätt eller
Math.floor(Math.random()*Array.length); eller den?

Permalänk
Medlem

@ProgrammeringElev:
Den andra utan +1. Om du tar +1 kan värdet bli out of index eftersom värdet kan bli arrayens max värde redan, och att värdet på palts 0 aldrig kommer att visas.

Permalänk
Medlem

Har inga invändningar mot sistnämnda då det stämmer. Det mest generella sättet att generera ett slumptal mellan två tal är att använda

Math.random() * (max - min) + min

Fast kan samtidigt bli lite bekymmersam över en sak någon kanske har bättre koll på. Math.random() ger ju ett tal inom intervallet [0-1), dvs exklusive 1. Jag provade i konsolen för att se vad för tal man får när man använder Math.random() och dessa tal har alltid 16 decimaler. I "värsta fall" kan det alltså bli 0.9999999999999999.

Provade att skriva Math.floor(0.9999999999999999) för att se att det fungera. Fast så fort man lägger på en till 9:a så avrundar även Math.floor till 1. Provade detta med olika slutsiffror...

Math.floor(0.99999999999999991) gav 0
Math.floor(0.99999999999999992) gav 0
Math.floor(0.99999999999999993) gav 0
Math.floor(0.99999999999999994) gav 0
Math.floor(0.99999999999999995) gav 1

Så efter man kommer till talet 0.99999999999999995 och uppåt så avrundar Math.floor talet uppåt istället. Vad beror detta på?