How to hide a select until an onclick event calls it?

[WebPage39]

Hi. I’ve been trying to get my head around this minor problem.
I hope someone can actually understand this entire code.
According to the follow code, once the program is run on a web browser, the resulting select should be hidden until I click on the onclick event handler. The problem here is that the select with the list already shows.
For a few days, I’ve been trying to figure out how to hide the select.
Because I’m still new to javascript, I don’t know what function to write up to make this work.
Please help.

<script>
      var provinces = new Array(2);
      provinces[0] = new Array("Alberta", "British Columbia", "Manitoba", "New Brunswick", "Newfoundland", "Nova Scotia", "Ontario", "Prince Edward Island", "Quebec", "Saskatchewan", "Northwest Territories", "Nunavut", "Yukon Territory");
      provinces[1] = new Array("AB", "BC", "MB", "NB", "NL", "NS", "ON", "PE", "QC", "SK", "NT", "NU", "YT");
  </script>
  <div id="selectDiv"></div>     
  <select name="province" id="province">
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    <option value="NB">New Brunswick</option>
    <option value="NL">Newfoundland</option>
    <option value="NS">Nova Scotia</option>
    <option value="ON">Ontario</option>
    <option value="PE">Prince Edward Island</option>
    <option value="QC">Quebec</option>
    <option value="SK">Saskatchewan</option>
    <option value="NT">Northwest Territories</option>
    <option value="NU">Nunavut</option>
    <option value="YT">Yukon Territory</option>
  </select>
  <script>
     function createSelect(divId, provincesArray) {
	var mySelect = document.createElement("SELECT"); 
	mySelect.setAttribute("name", "province"); 
	mySelect.setAttribute("id", "province"); 
	var newOption;
	var newTextNode; 
	for (i = 0; i < provincesArray[0].length; i++) {
		newOption = document.createElement("OPTION"); 
		newOption.setAttribute("value", provincesArray[1][i]); 
		newTextNode = document.createTextNode(provincesArray[0][i]);
		newOption.appendChild(newTextNode); 
		mySelect.appendChild(newOption); 
	}
	document.getElementById(divId).appendChild(mySelect);
 }
    </script>       
    <p><input type="button" value="Which province do you live in?" onclick="createSelect('selectDiv', provinces);" /></p>

[tioung]

hide the element in your css file (visibility: “hidden”)
In your js file, use .addEventListener(“click”, function(){
// code to select the element and make it visible again
})