I'm working on a UserScript that adds Buttons to a webpage. One of the buttons I'm working on when clicked will create a popup div. I'm trying to create a dynamic Select/Option dropdown list within the popup, with the options coming from an Array. However, I keep getting errors and was looking for some help in getting this to work. Here's a modified version of my code that deals with the creation of the option & select.
var button = document.createElement('button'),
button.onclick = prompt;
function prompt() {
var blockingDiv = document.createElement('div');
blockingDiv.id = 'PopupBackground';
var divPopup = document.createElement('div');
divPopup.id = 'DivPopup';
var logo = document.createElement('div');
logo.id = 'Logo';
var content = document.createElement('div');
content.id = 'Content';
var dropList = document.createElement('select');
dropList.id = 'DropListSelect';
dropList.name = 'DropListSelect';
content.appendChild(DropList);
var dropListOption = document.createElement('option');
dropListOption.id = 'DropListOptions';
dropListOption.name = 'DropListOptions';
dropList.appendChild(dropListOption);
var options =
[
{
'text': 'Select',
'value': '',
'defaultSelected': true,
'selected': true
},
{
'text': 'Text 1',
'value': 'A',
'defaultSelected': false,
'selected': false
},
{
'text': 'Text 2',
'value': 'B',
'defaultSelected': false,
'selected': false
},
{
'text': 'Text 3',
'value': 'C',
'defaultSelected': false,
'selected': false
}
];
var select = document.querySelector('#DropListSelect');
dropListOption.length = 0;
for (var i = 0; i <= options.length - 1; i++) {
var type = options[i];
dropListOption[i] = new Option(type.text, type.value, type.defaultSelected, type.selected)
}
When I click the button I get Uncaught TypeError: Cannot set properties of null (setting 'length') at HTMLButtonElement.prompt.
Give this a try:
var select = document.querySelector('#DropListSelect');
select.innerHTML = ""; // delete all existing options
for (var i = 0; i < options.length; i++) {
var type = options[i];
select.appendChild(new Option(type.text, type.value, type.defaultSelected, type.selected));
}
Changing my code to the following works now. Thank you James for getting me on the right track!
var button = document.createElement('button'),
button.onclick = prompt;
function prompt() {
var blockingDiv = document.createElement('div');
blockingDiv.id = 'PopupBackground';
var divPopup = document.createElement('div');
divPopup.id = 'DivPopup';
var logo = document.createElement('div');
logo.id = 'Logo';
var content = document.createElement('div');
content.id = 'Content';
var dropList = document.createElement('select');
dropList.id = 'DropListSelect';
dropList.name = 'DropListSelect';
content.appendChild(DropList);
var options =
[
{
'text': 'Select',
'value': '',
'defaultSelected': true,
'selected': true
},
{
'text': 'Text 1',
'value': 'A',
'defaultSelected': false,
'selected': false
},
{
'text': 'Text 2',
'value': 'B',
'defaultSelected': false,
'selected': false
},
{
'text': 'Text 3',
'value': 'C',
'defaultSelected': false,
'selected': false
}
];
for (var i = 0; i <= options.length - 1; i++) {
var dropListOption = document.createElement('option');
dropListOption.id = 'DropListOptions';
dropListOption.name = 'DropListOptions';
var type = options[i];
dropListOption.appendChild(new Option(type.text, type.value, type.defaultSelected, type.selected));
dropList.appendChild(dropListOption);
}