Cannot get text to appear in text area when I submit a button

Question

I am trying to build a random question generator for a card game that my 7 year old son and I like to play. Basically, what I’m trying to get is so that every time you click on the button, a new question will generate in the text area above. I have it so that the random questions are appearing in the console.log, they just aren’t appearing in the text area.

Here is the code that I have so far:

var generateBtn = document.querySelector("#generate");
let randomNumber = Math.floor(Math.random() * 8);
let worldQuestion = '';

if (randomNumber == 0) {
  worldQuestion = 'Highest Point';
} else if (randomNumber == 1) {
  worldQuestion = 'Lowest Point';
} else if (randomNumber == 2) {
  worldQuestion = 'Highest Population';
} else if (randomNumber == 3) {
  worldQuestion = 'Lowest Population';
} else if (randomNumber == 4) {
  worldQuestion = 'Most Neighboring Countries';
} else if (randomNumber == 5) {
  worldQuestion = 'Least Neighboring Countries';
} else if (randomNumber == 6) {
  worldQuestion = 'Biggest Area';
} else if (randomNumber == 7) {
  worldQuestion = 'Smallest Area';
}

function writeQuestion() {
  var passwordText = document.querySelector("#password");

  passwordText.value = worldQuestion;
}

generateBtn.addEventListener("click", writeQuestion);

<div class="wrapper">
  <div class="card">
    <div class="card-header">
      <h2>Generate a World Question</h2>
    </div>
    <div class="card-body">
      <textarea readonly id="password" aria-label="Generated World Question"></textarea>
    </div>
    <div class="card-footer">
      <button id="generate" class="btn" onClick="window.location.reload()" type="button">Generate World Question</button>
    </div>
  </div>
</div>

Learn about [how to debug small programs](//ericlippert.com/2014/03/05/how-to-debug-small-programs). [Rubber Duck Debug](//rubberduckdebugging.com) your code. Try using your browser’s [debug capabilities](//ali-dev.medium.com/how-to-easily-debug-in-javascript-5bac70f94f1a). See [What is a debugger and how can it help me diagnose problems?](/q/25385173/4642212). Use the [browser console (dev tools)](//webmasters.stackexchange.com/q/8525) (hit `F12`), read any errors. Without seeing your HTML, debugging this isn’t possible. Note that you only ever set `randomNumber` and `worldQuestion` once. — Sebastian Simon, Oct 21 '22 at 22:02
Are you sure that it is a `` element? I put your code into a snippet and it works fine. — Michael M., Oct 21 '22 at 22:06
You say they appear in the `console.log`, but your snippet has no `console.log()` call. Did you omit it? Also, notice your `worldQuestion` is being calculated only once (when the page first runs), not every time the button is clicked. — acdcjunior, Oct 21 '22 at 22:07
I did omit the console.log. How can I change it so that worldQuestion is calculated upon each button click? — Josh G., Oct 21 '22 at 22:13
@JoshuaGardner Just put the calculation in the event listener. See [Why does generating a random number outside of a loop, causes it to be always the same?](/q/68327944/4642212). Is _that_ your question? So _is_ the result shown or not? — Sebastian Simon, Oct 21 '22 at 22:16
Why would you have an `onClick="window.location.reload()"` attribute on your button? Remove it! — Sebastian Simon, Oct 21 '22 at 22:21

score 0 · Accepted Answer · answered Oct 21 '22 at 22:17

If you want worldQuestion to be calculated every time the button is pressed, you need to do the calculation inside the event listener. Like this:

var generateBtn = document.querySelector("#generate");

function writeQuestion() {
  let randomNumber = Math.floor(Math.random() * 8);
  let worldQuestion = '';
  
  if (randomNumber == 0) {
    worldQuestion = 'Highest Point';
  } else if (randomNumber == 1) {
    worldQuestion = 'Lowest Point';
  } else if (randomNumber == 2) {
    worldQuestion = 'Highest Population';
  } else if (randomNumber == 3) {
    worldQuestion = 'Lowest Population';
  } else if (randomNumber == 4) {
    worldQuestion = 'Most Neighboring Countries';
  } else if (randomNumber == 5) {
    worldQuestion = 'Least Neighboring Countries';
  } else if (randomNumber == 6) {
    worldQuestion = 'Biggest Area';
  } else if (randomNumber == 7) {
    worldQuestion = 'Smallest Area';
  }

  var passwordText = document.querySelector("#password");
  passwordText.value = worldQuestion;
}

generateBtn.addEventListener("click", writeQuestion);

<textarea id="password"></textarea>
<br>
<button id="generate">Generate</button>

Also, you do not need to use a large if-statement here. You store all the possible questions in an array, then choose an index at random. Like this:

var generateBtn = document.querySelector("#generate");

function writeQuestion() {
  let randomNumber = Math.floor(Math.random() * 8);
  
  questions = ['Highest Point', 'Lowest Point', 'Highest Population',
    'Lowest Population', 'Most Neighboring Countries',
    'Least Neighboring Countries', 'Biggest Area', 'Smallest Area']

  var passwordText = document.querySelector("#password");
  passwordText.value = questions[randomNumber];
}

generateBtn.addEventListener("click", writeQuestion);

<textarea id="password"></textarea>
<br>
<button id="generate">Generate</button>

Cannot get text to appear in text area when I submit a button

1 Answers1