javascript - 如何从我的报价生成器中获得多个报价？

Question

任何人都可以看看我的报价生成器并为我指明正确的方向吗？当我在 JS Bin 中开发它并将输出放入控制台日志时它工作正常 - 当你要求 5 个引号时你得到 5 个引号等，但现在我已经放入一个 html 页面我只得到 1 个引号无论如何用户选择的许多报价。谢谢。

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>

https://codepen.io/robgillibrand/pen/XZYQPN

Answer 1

正如 Patrick 在评论中提到的那样，返回值在循环内……它应该在循环外。此外，quote 变量也应该在外部定义，然后附加循环中的每个引号……或者至少这是一种方法。

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>