javascript - How to change select option value as a dropdown <a></a> tags for font-style script?

Question

I'm using a select option tag here to change the font style of my text area.

However, this look doesn't match my tool and I would like it to be inside of a Bootstrap dropdown instead.

I would like for this:

//Font select
const fontsSelect = document.getElementsByClassName('fonts-select')[0],
    styledTextArea = document.getElementsByClassName('styledTextarea')[0];
    fontsSelect.addEventListener('change', function() {
    styledTextArea.style.fontFamily = fontsSelect.value;

});

<select class="form-control form-control-sm fonts-select">
    <option selected disabled>Select font...</option>
    <option value="Arial">Arial</option>
    <option value="Cambria">Cambria</option>
    <option value="Courier">Courier</option>
    <option value="Calibri">Calibri</option>
    <option value="Futura">Futura</option>
    <option value="Franklin Gothic">Franklin Gothic</option>
    <option value="Garamond">Garamond</option>
    <option value="Helvetica">Helvetica</option>
    <option value="Rockwell">Rockwell</option>
    <option value="Times New Roman">Times New Roman</option>
    <option value="Verdana">Verdana</option>
</select>
            
<textarea class="styledTextarea" rows="15" placeholder="Write something.."></textarea>

question from:https://stackoverflow.com/questions/65860340/how-to-change-select-option-value-as-a-dropdown-a-a-tags-for-font-style-scri

Answer 1

@ixcode, you are not having any submit button so that the program will change the font style.