I have a class (for creating a custom form element) called ListOfDropdowns inside a .html file :
class ListOfDropdowns extends HTMLElement {
connectedCallback() {
let myParent = document.body
let array = ['Volvo', 'Saab', 'Mercades', 'Audi']
let template = document.querySelector('#list-of-dropdowns-template').content;
this.attachShadow({
mode: 'open'
}).appendChild(template.cloneNode(true));
let add_button = this.shadowRoot.querySelector("#add");
let remove_button = this.shadowRoot.querySelector("#remove");
let list = this.shadowRoot.querySelector("#list");
add_button.addEventListener('click', () => {
var selectList = document.createElement('select')
selectList.id = 'mySelect'
selectList.style.display = 'block'
myParent.appendChild(selectList)
//Create and append the options
for (var i = 0; i < array.length; i++) {
var option = document.createElement('option')
option.value = array[i]
option.text = array[i]
selectList.appendChild(option)
}
list.appendChild(selectList)
});
remove_button.addEventListener('click', () => {
list.lastChild.remove()
});
}
}
customElements.define('list-of-dropdowns', ListOfDropdowns);
And some lines beneath the class, I have this code:
var VIA_ATTRIBUTE_TYPE = { TEXT:'text',
CHECKBOX:'checkbox',
RADIO:'radio',
IMAGE:'image',
DROPDOWN:'dropdown'
ListOfDropdowns:'listofdropdowns'
};
But, I get an error at the line ListOfDropdowns:'listofdropdowns'.
Uncaught SyntaxError: Unexpected identifier
Both the class ListOfDropdowns and VIA_ATTRIBUTE_TYPE are defined/declared inside the
<script> tag inside the <body> tag in the .html file.
Based on the comment, I added a comma after DROPDOWN:'dropdown' and that resolved the error.
var VIA_ATTRIBUTE_TYPE = { TEXT:'text',
CHECKBOX:'checkbox',
RADIO:'radio',
IMAGE:'image',
DROPDOWN:'dropdown',
ListOfDropdowns:'listofdropdowns'
};