run function when button clicked

Question

I have a very simple issue which I just can't get my head around. I have created function and want to run this function as soon as I click a button. It should be straight forward right? Adding onclick event to my button. But I just can't get it to run. Am I missing something?

Here is my markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/styles.css">
    <title>Get To Know Each Other...</title>
</head>
<body>
    <div class="wrapper">
        <h1 id="question"></h1>
        <button onclick="showAnswer()">Next question</button>
    </div>
    <script src="js/script.js"></script>
</body>
</html>

Here is my JS:

var question = [
    'If you didn’t have to sleep, what would you do with the extra time?',
    'What’s your favorite piece of clothing you own / owned?',
    'What hobby would you get into if time and money weren’t an issue?',
    'How often do you play sports?',
    'What job would you be terrible at?',
    'When was the last time you climbed a tree?',
    'What songs have you completely memorized?',
    'What game or movie universe would you most like to live in?',
    'What takes up too much of your time?',
    'What’s your favorite genre of book or movie?',
    'What’s the best single day on the calendar?',
    'How do you relax after a hard day of work?',
    'What’s the farthest you’ve ever been from home?',
    'What is the most annoying question that people ask you?',
    'Would you rather go hang gliding or whitewater rafting?',
    'What’s your dream car?'
]

var rand = Math.floor(Math.random() * question.length);

function showAnswer(){
    document.getElementById("question").innerHTML = question[rand];
}

showAnswer();

Here is my Fiddle: https://jsfiddle.net/5cabtx79/1/

Answer 1

Place var rand = Math.floor(Math.random() * question.length); inside the function. Outside the function the value in it will be set only once. But as per requirement the value need to be changed on every click of the button

 var question = [ 'If you didn't have to sleep, what would you do with the extra time?', 'What's your favorite piece of clothing you own / owned?', 'What hobby would you get into if time and money weren't an issue?', 'How often do you play sports?', 'What job would you be terrible at?', 'When was the last time you climbed a tree?', 'What songs have you completely memorized?', 'What game or movie universe would you most like to live in?', 'What takes up too much of your time?', 'What's your favorite genre of book or movie?', 'What's the best single day on the calendar?', 'How do you relax after a hard day of work?', 'What's the farthest you've ever been from home?', 'What is the most annoying question that people ask you?', 'Would you rather go hang gliding or whitewater rafting?', 'What's your dream car?' ] function showAnswer() { var rand = Math.floor(Math.random() * question.length); document.getElementById("question").innerHTML = question[rand]; } showAnswer();

 <div class="wrapper"> <h1 id="question"></h1> <button onclick="showAnswer()">Next question</button> </div>

run function when button clicked

Question

1 answers

solution1
3 ACCPTED 2018-02-25 05:47:03

run function when button clicked

Question

1 answers

solution1 3 ACCPTED 2018-02-25 05:47:03

solution1
3 ACCPTED 2018-02-25 05:47:03