单击按钮时运行功能

时间:2018-02-25 05:44:43

标签: javascript

我有一个非常简单的问题,我无法理解。我创建了函数,并希望在单击按钮后立即运行此函数。它应该是直截了当的吗?将onclick事件添加到我的按钮。但是我无法让它运行起来。我错过了什么吗?

这是我的标记:

<!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>

这是我的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();

这是我的小提琴:https://jsfiddle.net/5cabtx79/1/

1 个答案:

答案 0 :(得分:3)

var rand = Math.floor(Math.random() * question.length);放在函数中。在函数外部,其中的值仅设置一次。但是根据要求,每次点击按钮都需要更改值

&#13;
&#13;
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();
&#13;
<div class="wrapper">
  <h1 id="question"></h1>
  <button onclick="showAnswer()">Next question</button>
</div>
&#13;
&#13;
&#13;