Returning random strings from an array when button is pressed

Question

Hey StackOverflow geniuses!

Maybe you can help me with this one. I'm trying to return random content from arrays when the 'Shuffle' button is pressed. I'm able to return content on the first button press, but not on any subsequent presses. I know my javascript is missing something, but I'm not sure what.

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>

CertainPerformance · Accepted Answer · 2018-09-07 07:49:25Z

You need to select new randomScenarios, etcs, every time the button is pressed - in your current code, you're only ever selecting one scenario and so on when the script initially runs, and then printing that same scenario, control, and task every time the button is pressed. Generate new ones inside your onclick handler:

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>

Saif Taher · Accepted Answer · 2018-09-07 07:56:37Z

Edit the JavaScript as follows. It will work:

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;
}

When you click the button, you set the innerHTML of each element to the three variables: randomScenario, randomControl, randomTask. The problem, is that the value of each of those variables won't change when you click the button, because you've already assigned the value of array[Math.floor(Math.random()*array.length)]. You've assigned this value only once. You have to set the value of these variables to the same line each time you click the button so that values actually change.

Collectives™ on Stack Overflow

Returning random strings from an array when button is pressed

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related