如何从报价生成器中显示多个引号？

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

就像帕特里克的评论中提到的那样，返回值是在循环内...它应该在外面。此外，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>