按下按钮时从数组中返回随机字符串答案

【问题标题】：Returning random strings from an array when button is pressed按下按钮时从数组中返回随机字符串
【发布时间】：2018-09-07 07:47:13
【问题描述】：

嘿 StackOverflow 天才！

也许你可以帮我解决这个问题。当按下“随机播放”按钮时，我试图从数组中返回随机内容。我可以在第一次按下按钮时返回内容，但不能在任何后续按下时返回。我知道我的 javascript 缺少一些东西，但我不确定是什么。

var scenarioArray = [
    'Aliens from another planet have invaded and set up their own global government. Humans have been subjugated and now serve the aliens doing hard labor.',
    'Dinosaurs are back and terrorize the global population during daylight hours. They are big, they are mean, and they mean business. Theyve made going outside during the daytime absolutely impossible for humans.',
    'The globe has flooded and land is gone. Those who already owned boats have shaken out to be the leaders of the new global society.'
];
var randomScenario = scenarioArray[Math.floor(Math.random() * scenarioArray.length)];

var controlArray = [
    'All communication between humans is illegal and banned. This includes written, verbal, and electronic forms of communication.',
    'All existing forms of transportation have vanished, and humans are only able to get to where they need to go by walking.',
    'You are being watched. Survillance chips have been implanted into every human brain and they are used to monitor thought and action. Weekly, at the same time the system goes down for maintenance at a secret time. How can you exploit this? '
];
var randomControl = controlArray[Math.floor(Math.random() * controlArray.length)];

var taskArray = [
    'Build a library system that spreads and scales globally.',
    'Build a secret messaging service that can scale globally.',
    'Build a method of transportation that is silent and secret.'
];
var randomTask= taskArray[Math.floor(Math.random() * taskArray.length)];


var shuffle = document.getElementById('shuffle-button');
shuffle.onclick = function() {
    document.getElementById('scenarioScript').innerHTML = randomScenario;
    document.getElementById('controlScript').innerHTML = randomControl;
    document.getElementById('taskScript').innerHTML = randomTask;
}

button {
    margin-top: 3rem;
}

body {
    background-color: #333333;
}

.card-row {
    margin-top: 4rem;
}

.btn-primary {
 /*   background-color: green;*/
}

h1 {
    color: white;
    margin-top: 8rem;
}

<!DOCTYPE html>
<html>
<head>
    <title>Dystopia Cards</title>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <link rel="stylesheet" href="css/index.css">

</head>
<body>

    <div class="container">

        <div class="row">
            <div class="col">
                <h1 class="text-center">Dystopia Generator</h1>
            <div class="col">
        </div>

        <div class="row card-row">
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Scenario</h5>
                        <p class="card-text" id="scenarioScript">Click 'Shuffle' button to generate.</p>
                    </div>
                </div>
            </div>
        
            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Control</h5>
                        <p class="card-text" id="controlScript">Click 'Shuffle' button to generate.</p>
                    </div>
                </div>
            </div>

            <div class="col">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Task</h5>
                        <p class="card-text" id="taskScript">Click 'Shuffle' button to generate.</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row justify-content-md-center">
            <div class="col">
                <button class="btn-lg btn btn-primary" id="shuffle-button">Shuffle</button>
            </div>
        </div>

    </div>

</body>

<script src="js/main.js"></script>
</html>

【问题讨论】：

标签： javascript html css button

【解决方案1】：

每次按下按钮时，您都需要选择新的randomScenarios 等 - 在您当前的代码中，您只会在脚本最初运行时选择一个场景等等，然后在每次按下按钮时打印相同的场景、控件和任务。在您的 onclick 处理程序中生成新的：

var shuffle = document.getElementById('shuffle-button');
shuffle.onclick = function() {
  var randomScenario = scenarioArray[Math.floor(Math.random() * scenarioArray.length)];
  var randomControl = controlArray[Math.floor(Math.random() * controlArray.length)];
  var randomTask = taskArray[Math.floor(Math.random() * taskArray.length)];
  document.getElementById('scenarioScript').innerHTML = randomScenario;
  document.getElementById('controlScript').innerHTML = randomControl;
  document.getElementById('taskScript').innerHTML = randomTask;
}



var scenarioArray = [
  'Aliens from another planet have invaded and set up their own global government. Humans have been subjugated and now serve the aliens doing hard labor.',
  'Dinosaurs are back and terrorize the global population during daylight hours. They are big, they are mean, and they mean business. Theyve made going outside during the daytime absolutely impossible for humans.',
  'The globe has flooded and land is gone. Those who already owned boats have shaken out to be the leaders of the new global society.'
];


var controlArray = [
  'All communication between humans is illegal and banned. This includes written, verbal, and electronic forms of communication.',
  'All existing forms of transportation have vanished, and humans are only able to get to where they need to go by walking.',
  'You are being watched. Survillance chips have been implanted into every human brain and they are used to monitor thought and action. Weekly, at the same time the system goes down for maintenance at a secret time. How can you exploit this? '
];


var taskArray = [
  'Build a library system that spreads and scales globally.',
  'Build a secret messaging service that can scale globally.',
  'Build a method of transportation that is silent and secret.'
];

button {
  margin-top: 3rem;
}

body {
  background-color: #333333;
}

.card-row {
  margin-top: 4rem;
}

.btn-primary {
  /*   background-color: green;*/
}

h1 {
  color: white;
  margin-top: 8rem;
}

<div class="container">

  <div class="row">
    <div class="col">
      <h1 class="text-center">Dystopia Generator</h1>
      <div class="col">
      </div>

      <div class="row card-row">
        <div class="col">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Scenario</h5>
              <p class="card-text" id="scenarioScript">Click 'Shuffle' button to generate.</p>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Control</h5>
              <p class="card-text" id="controlScript">Click 'Shuffle' button to generate.</p>
            </div>
          </div>
        </div>

        <div class="col">
          <div class="card">
            <div class="card-body">
              <h5 class="card-title">Task</h5>
              <p class="card-text" id="taskScript">Click 'Shuffle' button to generate.</p>
            </div>
          </div>
        </div>
      </div>

      <div class="row justify-content-md-center">
        <div class="col">
          <button class="btn-lg btn btn-primary" id="shuffle-button">Shuffle</button>
        </div>
      </div>

    </div>

【讨论】：

【解决方案2】：

如下编辑 JavaScript。它会工作：

var scenarioArray = [
    'Aliens from another planet have invaded and set up their own global government. Humans have been subjugated and now serve the aliens doing hard labor.',
    'Dinosaurs are back and terrorize the global population during daylight hours. They are big, they are mean, and they mean business. Theyve made going outside during the daytime absolutely impossible for humans.',
    'The globe has flooded and land is gone. Those who already owned boats have shaken out to be the leaders of the new global society.'
];
var randomScenario = scenarioArray[Math.floor(Math.random() * scenarioArray.length)];

var controlArray = [
    'All communication between humans is illegal and banned. This includes written, verbal, and electronic forms of communication.',
    'All existing forms of transportation have vanished, and humans are only able to get to where they need to go by walking.',
    'You are being watched. Survillance chips have been implanted into every human brain and they are used to monitor thought and action. Weekly, at the same time the system goes down for maintenance at a secret time. How can you exploit this? '
];
var randomControl = controlArray[Math.floor(Math.random() * controlArray.length)];

var taskArray = [
    'Build a library system that spreads and scales globally.',
    'Build a secret messaging service that can scale globally.',
    'Build a method of transportation that is silent and secret.'
];
var randomTask= taskArray[Math.floor(Math.random() * taskArray.length)];

var shuffle = document.getElementById('shuffle-button');
shuffle.onclick = function() {

  //HERE IS THE NEW JAVASCRIPT

  randomScenario = scenarioArray[Math.floor(Math.random() * scenarioArray.length)];
  randomControl = controlArray[Math.floor(Math.random() * controlArray.length)];
  randomTask= taskArray[Math.floor(Math.random() * taskArray.length)];

  //END OF NEW JAVASCRIPT

    document.getElementById('scenarioScript').innerHTML = randomScenario;
    document.getElementById('controlScript').innerHTML = randomControl;
    document.getElementById('taskScript').innerHTML = randomTask;
}

单击按钮时，将每个元素的 innerHTML 设置为三个变量：randomScenario、randomControl、randomTask。问题在于，当您单击按钮时，每个变量的值都不会改变，因为您已经分配了数组 [Math.floor(Math.random()*array.length)] 的值。您只分配了一次此值。每次单击按钮时，您必须将这些变量的值设置为同一行，以便实际更改值。

【讨论】：