'Javascript function returning [object HTMLSelectElement] string instead of <select> HTML tag
I´m trying to create and call a function that builds a <select> item and returns this item to be rendered on the screen.
However, it renders the text "[object HTMLSelectElement]" on the screen instead of the <select> element that I want. In the Chrome console, though, it renders the <select> element perfectly.
function renderSelect(selectOptions) {
var select = document.createElement("select");
for (let index = 0; index < selectOptions.length; index++) {
const element = selectOptions[index];
select.insertAdjacentHTML(
"beforeend",
`<option value="${element}">${element}</option>`
);
}
// This shows the <select> element perfectly in the console
console.log(select)
return select;
}
////////// BELOW IS THE FUNCTION CALL IN ANOTHER (WHICHEVER) PART OF THE CODE
// This renders "[object HTMLSelectElement]" on the screen instead of the <select> element
`${renderSelect(selectOptions)}`;
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
