How to display number of elements based on user input?

Hello Im wondering how to do a selection in the input and get the number of squares that the input selected, so if I select the number three get only three squares displaying.


<p>show me&nbsp;<form>
	<select id="mySelect">
		<option value="1">1</option>
		<option value="2">2</option>
		<option value="3">3</option>
		<option value="4">4</option>
		<option value="4">5</option>
		<option value="4">6</option>

<div id="square"></div>


p {
	display: inline-block;
	margin: 0;
#square {
  height: 50px;
  width: 50px;
  background-color: #555;
  margin: 5px;
form {
	display: inline-block;


var myDiv = document.getElementById('square');
for(var i=0; i < 6; i++) {

  1. Grab the select element and add a “change” event listener to it.

  2. Get the event target value and use the value as the loop condition.

I would suggest giving the boxes a container so you can more easily clear the old boxes before appending the new.

thanks alot super handy answer was very useful to me thanks