javascript - 如何从报价单生成器中显示多个报价单？

谁能看看我的报价生成器并为我指出正确的方向？当我在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

最佳答案

就像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> 

关于javascript - 如何从报价单生成器中显示多个报价单？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48934880/