Issue
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>
Solution
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>
Answered By - Michael M.
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.