Question

嘿，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>

Answer 1

每次按下按钮时，您需要选择新的randomScenario等-在当前代码中，您只需要选择一个场景，依此类推最初运行，然后在每次按下按钮时打印相同的方案，控件和任务。在您的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>

Answer 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。问题在于，单击按钮后，每个变量的值都不会更改，因为您已经分配了array [Math.floor（Math.random（）* array.length）]的值。您仅一次分配了该值。每次单击按钮时，必须将这些变量的值设置为同一行，以使值实际更改。

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

2 个答案: