How to display number of elements based on user input?

JavaScript
1

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.
codehttps://codepen.io/josemon322/pen/oNvZeqb

HTML

<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>
	</select>
</form>&nbsp;squares</p>

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

CSS

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

JS

var myDiv = document.getElementById('square');
for(var i=0; i < 6; i++) {
    document.body.appendChild(myDiv.cloneNode(true));
}
2

  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.
https://jsfiddle.net/Lwo9m3kt/

3

thanks alot super handy answer was very useful to me thanks