Can anyone have a look and point me in the right direction with my quote generator? When I developed it in JS Bin and put the output to the console log it works fine - when you ask for 5 quotes you get five quotes etc., but now I've put into an html page I only get 1 quote regardless of how many quotes the user chooses. Thanks.
var generatorA = {
quoteA: ['The big bad wolf', 'Little Red Riding Hood', 'Pinnochio', 'The three little pigs',
'Prince charming', 'The gingerbread man', 'The three blind mice',
'The sleeping beauty', 'Rapunzel', 'The seven dwarves', 'The princess'
],
quoteB: ['kissed', 'cast a spell', 'swam', 'flew', 'whistled', 'sang', 'climbed', 'shouted', 'slept', 'ate', 'ran', 'enchanted'],
quoteC: ['in the tower', 'through the forest', 'up the river',
'up the castle', 'up the clock', 'in the garden'
]
};
var generatorB = {
quoteA: ['Dracula', 'The ghost', 'Frankenstein', 'A hagged old witch', 'The werewolf', 'The mummy', 'The zombie', 'The merman', 'The vampire bat', 'The demon', 'The skeleton'],
quoteB: ['howled', 'cackled', 'flew', 'cast a spell', 'climbed', 'shouted', 'shrieked', 'terrified', 'slithered', 'sacrificed'],
quoteC: ['in the graveyard', 'in the haunted house', 'in a cave',
'up the castle', 'up the clock', 'in the garden', 'on the desolate moor'
]
};
var dictionary = {
a: generatorA,
b: generatorB
};
function randQuote() {
var n = document.getElementById("userInput").value;
for (var i = 0; i < n; i++) {
if (document.getElementById("quoteChoice").value === 'a') {
sub = dictionary.a;
} else if (document.getElementById("quoteChoice").value === 'b') {
sub = dictionary.b;
}
var quote = "Here is your quote: " + sub.quoteA[Math.floor(Math.random() * sub.quoteA.length)] + ' ' +
sub.quoteB[Math.floor(Math.random() * sub.quoteB.length)] + ' ' +
sub.quoteC[Math.floor(Math.random() * sub.quoteC.length)] + '!';
return quote;
}
}
function printQuote() {
var pTag = document.getElementById("demo");
pTag.innerText = randQuote();
}
printQuote();@keyframes example {
from {
background-color: grey;
}
to {
background-color: black;
}
}
p,
h1 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.click {
color: white;
display: inline-block;
padding: 5px;
margin: 10px;
overflow: auto;
line-height: 1px;
background-color: grey;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}<div style="text-align:center">
<h1>Random Quote Generator</h1>
<div>
<p>Please choose your quote generator. Choose 'a' for fairytale/nursery rhymes or 'b' for horror characters?</p>
<select name="quoteChoice" id="quoteChoice" />>
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
<div class=click>
<p>How many quotes would you like? You can have up to five!</p>
<form>
Number of quotes?:
<input name="userInput" id="userInput" type="number" min="1" max="5" />
<input type="button" onclick="printQuote()" value="Submit" />
</form>
</div>
<div>
<p id="demo"></p>
</div>
</div>Like mentioned in comments by Patrick, the return value was inside loop... it should be on outside. Also, the quote variable should be defined on the outside as well and then each quote in loop appended... or at least that's one way to do it.
var generatorA = {
quoteA: ['The big bad wolf','Little Red Riding Hood','Pinnochio', 'The three little pigs',
'Prince charming', 'The gingerbread man', 'The three blind mice',
'The sleeping beauty','Rapunzel','The seven dwarves','The princess'],
quoteB: ['kissed','cast a spell', 'swam', 'flew', 'whistled', 'sang', 'climbed','shouted','slept','ate', 'ran', 'enchanted'],
quoteC: ['in the tower', 'through the forest','up the river',
'up the castle','up the clock','in the garden']};
var generatorB = {
quoteA: ['Dracula', 'The ghost', 'Frankenstein','A hagged old witch','The werewolf','The mummy', 'The zombie', 'The merman', 'The vampire bat','The demon','The skeleton'],
quoteB: ['howled', 'cackled', 'flew', 'cast a spell', 'climbed', 'shouted','shrieked','terrified','slithered', 'sacrificed'],
quoteC: ['in the graveyard', 'in the haunted house','in a cave',
'up the castle','up the clock','in the garden','on the desolate moor']};
var dictionary = {
a: generatorA,
b: generatorB
};
function randQuote() {
var n = document.getElementById("userInput").value;
var quote='';
for (var i = 0; i < n; i++) {
if (document.getElementById("quoteChoice").value==='a'){
sub = dictionary.a;
} else if (document.getElementById("quoteChoice").value==='b'){
sub = dictionary.b;
}
quote += sub.quoteA[Math.floor(Math.random()*sub.quoteA.length)]+' '
+sub.quoteB[Math.floor(Math.random()*sub.quoteB.length)]+' '
+sub.quoteC[Math.floor(Math.random()*sub.quoteC.length)]+'!'
+'\n';
}
return "Here is your quote: \n"+ quote;
}
function printQuote() {
var pTag = document.getElementById("demo");
pTag.innerText=randQuote();
}
printQuote();@keyframes example {
from {background-color: grey;}
to {background-color: black;}
}
p, h1 {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.click {
color: white;
display: inline-block;
padding: 5px;
margin: 10px;
overflow: auto;
line-height: 1px;
background-color: grey;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
animation-direction: alternate;
}<div style="text-align:center">
<h1>Random Quote Generator</h1>
<div>
<p>Please choose your quote generator. Choose 'a' for fairytale/nursery rhymes or 'b' for horror characters?</p>
<select name="quoteChoice" id="quoteChoice"/>>
<option value="a">a</option>
<option value="b">b</option>
</select>
</div>
<div class=click>
<p>How many quotes would you like? You can have up to five!</p>
<form>
Number of quotes?:
<input name="userInput" id="userInput" type="number" min="1" max="5"/>
<input type="button" onclick="printQuote()" value="Submit"/>
</form>
</div>
<div>
<p id="demo"></p>
</div>
</div> Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments