title: How to get the selected texts and display them?
body: <p>What I'm trying to do is to grab the selected option from each of the selection boxes, click 'submit' and store them in the "stored" paragraph.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="container"&gt;
  &lt;button id="button" onclick="rolldices()"&gt;Roll dices&lt;/button&gt;
  
  &lt;span id="dice1"&gt;0&lt;/span&gt;
  &lt;span id="dice2"&gt;0&lt;/span&gt;
  &lt;span id="dice3"&gt;0&lt;/span&gt;
  &lt;span id="dice4"&gt;0&lt;/span&gt;
  &lt;span id="dice5"&gt;0&lt;/span&gt;
  &lt;span id="dice6"&gt;0&lt;/span&gt;
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  
  &lt;select id="select1"&gt;
  &lt;option&gt;1
  &lt;option&gt;2
  &lt;option&gt;3
  &lt;option&gt;4
  &lt;option&gt;5
  &lt;option&gt;6
  &lt;/select&gt;
  
  &lt;select id="select2"&gt;
  &lt;option&gt;1
  &lt;option&gt;2
  &lt;option&gt;3
  &lt;option&gt;4
  &lt;option&gt;5
  &lt;option&gt;6
  &lt;/select&gt;   
  
  &lt;select id="select3"&gt;
  &lt;option&gt;1
  &lt;option&gt;2
  &lt;option&gt;3
  &lt;option&gt;4
  &lt;option&gt;5
  &lt;option&gt;6
  &lt;/select&gt;
  
  &lt;select id="select4"&gt;
  &lt;option&gt;1
  &lt;option&gt;2
  &lt;option&gt;3
  &lt;option&gt;4
  &lt;option&gt;5
  &lt;option&gt;6
  &lt;/select&gt;   
  
  &lt;select id="select5"&gt;
  &lt;option&gt;1
  &lt;option&gt;2
  &lt;option&gt;3
  &lt;option&gt;4
  &lt;option&gt;5
  &lt;option&gt;6
  &lt;/select&gt;   
  
  &lt;select id="select6"&gt;
  &lt;option&gt;1&lt;/option&gt;
  &lt;option&gt;2&lt;/option&gt;
  &lt;option&gt;3&lt;/option&gt;
  &lt;option&gt;4&lt;/option&gt;
  &lt;option&gt;5&lt;/option&gt;
  &lt;option&gt;6&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;button id="submit" onclick="submit()"&gt;Submit your answer&lt;/button&gt;  
  
  &lt;br&gt;&lt;br&gt;
  
  &lt;p id="correct"&gt;Correct numbers guessed: &lt;/p&gt;
  &lt;p id="stored"&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var numbers = [ '1', '2', '3', '4', '5', '6' ];
  
  var dices = [ 'dice1', 'dice2', 'dice3', 'dice4', 'dice5', 'dice6' ];
  
  var select = [ 'select1', 'select2', 'select3', 'select4', 'select5', 'select6']
  
  function rolldices() {
  
  for (var diceindex=0; diceindex&lt;dices.length; diceindex++) {
  
  var dice_value = Math.floor((Math.random()*numbers.length));
  
  document.getElementById("dice" + (diceindex + 1)).innerHTML=numbers[dice_value];
  
  }
  
  } // end of rolldices()
  </code></pre>
  
  <p>Here is my attempt at solving the problem:</p>
  
  <pre><code>function submit() {
  
  for (var selectindex=0; selectindex&lt;select.length; selectindex++) {
  
  var e = document.getElementById("select" + (selectindex + 1));
  var storedNumbers = e.options[e.selectedIndex].text;
  
  document.getElementById("select" + (selectindex + 1)).text;
  document.getElementById("stored").innerHTML=storedNumbers;
  }
  
  
  
  
  
  } // end of submit() 
  </code></pre>
  
  <p>This works SORT OF, but only the last selectbox's text is being displayed in the "stored" paragraph.. What is wrong?</p>