简体   繁体   English

单击按钮时运行功能

[英]run function when button clicked

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. 将onclick事件添加到我的按钮。 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: 这是我的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/ 这是我的小提琴: https : //jsfiddle.net/5cabtx79/1/

Place var rand = Math.floor(Math.random() * question.length); 放置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> 

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM