How to hide a select until an onclick event is clicked?

[webpage83]

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");
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>
  <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>  
    <p><input type="button" value="Which province do you live in?" onclick="createSelect('selectDiv', provinces);" /></p>

[gillesmigliori]

Hi,

You create the select with your createSelect() function, so you should remove it from your HTML code. Else you’ll have two selects, and as they have the same id, it won’t work.

Here’s a working pen: https://codepen.io/migli/pen/popBJER

[Thallius]

You must decide if you want to create the select with javascript or if you only want to show and hide it.

If the select options are static you should not create the select in javascript but in HTML and add the hidden attribute. Then you can easily make it visible in javascript by setting the display attribute to whatever you want.

If the options are not static but depending on something else you should create the select (or even the options would be enough) with javascript.

[rpg_digital]

@webpage83 For your consideration.

In javascript since ES6 we now have a feature called destructuring assignment.

Example of destructuring an Array

const [breakfast, lunch, dinner] = ['cornflakes', 'sandwich', 'bolognese']
console.log(breakfast) // 'cornflakes'
console.log(dinner) // 'bolognese'

The variable assignment order breakfast, lunch, dinner corresponds with the array’s order 'cornflakes', 'sandwich', 'bolognese'

So with your code in mind you could have

const [alphaCode, province] = ['AB', 'Alberta']
console.log(alphaCode) // 'AB'
console.log(province) // 'Alberta'

This destructing can also be used inside of a loop, so you could then structure your provinces like so using array literals

const provinces = [
  ['AB', 'Alberta'],
  ['BC', 'British Columbia'],
  ['MB', 'Manitoba'],
  ['NB', 'New Brunswick'],
  ['NL', 'Newfoundland']
]

Here I am using a for…of loop to log out the alpha codes and province names.

for (const [alphaCode, province] of provinces) {
  console.log(alphaCode + ' - ' + province)
}

/* Outputs
AB - Alberta
BC - British Columbia
MB - Manitoba
NB - New Brunswick
NL - Newfoundland
*/

You can hopefully see that destructuring provides a clearer alternative to using indexes e.g. provincesArray[1][i] and provincesArray[0][i]

In addition if you use ‘let’ or ‘const’ to define your variables you can take advantage of block scope

You could then remove these two lines

var newOption;
var newTextNode;

And define the variables inside of your loop instead. By using const here, we get an entirely new variable definition for each iteration of the loop.

for (const [alphaCode, province] of provinces) {
  const newOption = document.createElement('OPTION')
  const newTextNode = document.createTextNode(province)
  
  newOption.setAttribute('value', alphaCode)
  newOption.appendChild(newTextNode)
  mySelect.appendChild(newOption)
}

[Andreeeeee]

There are a few ways to do this. One way is to use the :hidden CSS property. Another way is to use the jQuery hide() function