CODEWITHSUNDEEP
javascript
mba1592
mba1592

Reputation: 5

Javascript onload isn't working for my random word generator

onload in js isn't working for me. I'm trying to get it to randomly generate a movie for a hangman game, however, it's not wanting to load. I've tried running it in CodePen as well, so it's nothing to do with the links. Any suggestions would be great. 

var movieTitles = [
  "halloween",
  "suspiria",
  "audition",
  "hereditary",
  "the beyond",
  "the evil dead",
  "the blair witch project"
];

// Execute on page load.
document.getElementById("movie-title").onload = function() {updateMovieToGuess();};


//Generating random horror movie title

var updateMovieToGuess = function() {
  movieToGuess = movieTitles[Math.floor(Math.random() * movieTitles.length)];

};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Hangman</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script scr="javascript/games.js"></script>
<link href="https://fonts.googleapis.com/css?family=IM+Fell+Double+Pica+SC" rel="stylesheet">
</head>

<body>
    <p id='any-key'>Press any key to get started</p>
    <p id='movie-title'>Movie Title:</p>
    <p id='letters'>Letters Guessed:</p>
    <p id='lives-left'>Lives Remaining:</p>
    <p id='wins'>Movies You've Survived: </p>
    <p id='lost'>Movies You Died In:</p>
    
    <footer>
    </footer>
</body>

</html>

Upvotes: 0

Views: 96

Answers (4)

l-portet
l-portet

Reputation: 861

You try to trigger the onload event on #movie-title instead of the whole page, here is the error.

Just do:

window.onload = function() {updateMovieToGuess();};

Upvotes: 0

Limbo
Limbo

Reputation: 2290

You should use DOMContentLoaded for document instead of onload for p.

onload is used for such elements as script, link, img, etc. - for those, that are loading data. p does not load any data, so onload won't be fired.

DOMContentLoaded event is being fired when DOM is ready to use, so it's your choice! :)

var movieTitles = [
  "halloween",
  "suspiria",
  "audition",
  "hereditary",
  "the beyond",
  "the evil dead",
  "the blair witch project"
];


//Generating random horror movie title
function updateMovieToGuess() {
  movieToGuess = movieTitles[Math.floor(Math.random() * movieTitles.length)];
  console.log(movieToGuess) 
}

document.addEventListener("DOMContentLoaded", updateMovieToGuess)
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Hangman</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <!-- <script scr="javascript/games.js"></script> -->
<link href="https://fonts.googleapis.com/css?family=IM+Fell+Double+Pica+SC" rel="stylesheet">
</head>

<body>
    <p id='any-key'>Press any key to get started</p>
    <p id='movie-title'>Movie Title:</p>
    <p id='letters'>Letters Guessed:</p>
    <p id='lives-left'>Lives Remaining:</p>
    <p id='wins'>Movies You've Survived: </p>
    <p id='lost'>Movies You Died In:</p>

    <footer>
    </footer>
</body>

</html>

Upvotes: 0

BlackPearl
BlackPearl

Reputation: 1662

This will get a variable to be stored in movieToGuess

var movieTitles = [
  "halloween",
  "suspiria",
  "audition",
  "hereditary",
  "the beyond",
  "the evil dead",
  "the blair witch project"
];

// Execute on page load.
window.onload = function() {updateMovieToGuess();};


//Generating random horror movie title

var updateMovieToGuess = function() {
  movieToGuess = movieTitles[Math.floor(Math.random() * movieTitles.length)];
 console.log(movieToGuess);
};
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Hangman</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script scr="javascript/games.js"></script>
<link href="https://fonts.googleapis.com/css?family=IM+Fell+Double+Pica+SC" rel="stylesheet">
</head>

<body>
    <p id='any-key'>Press any key to get started</p>
    <p id='movie-title'>Movie Title:</p>
    <p id='letters'>Letters Guessed:</p>
    <p id='lives-left'>Lives Remaining:</p>
    <p id='wins'>Movies You've Survived: </p>
    <p id='lost'>Movies You Died In:</p>

    <footer>
    </footer>
</body>

</html>

Upvotes: 0

jaden.joeyak
jaden.joeyak

Reputation: 101

Well, what I usually do for random things is this.

var rand = Math.random(0, 100)

if (rand < 'put percentage here') {
print('then do which one you want')
}

That maybe could work, and also do that for each one.

Upvotes: 1

Related Questions