JS 将单选按钮改为下拉

Question

I have a JS file that changes fonts based on the font that is selected, up until now this was done with radio buttons. But since I have too many options now I would like to switch to a drop down menu. On the HTML side this is easy, but my JS is very rusty and this script was done creatively.

The section that needs work is

var font = getRadioVal(document.getElementById('form'), 'NewFont');

Here getRadioVal is

function getRadioVal(form, name) {
    var val;
    // get list of radio buttons with specified name
    var radios = form.elements[name];

    // loop through list of radio buttons
    for (var i=0, len=radios.length; i<len; i++) {
        if ( radios[i].checked ) { // radio checked?
            val = radios[i].value; // if so, hold its value in val
            break; // and break out of for loop
        }
    }
    return val; // return value of checked radio or undefined if none checked

So since this is the direct output, I would expect that this would work. But it does not. Could someone please point out where I am going wrong?

var font = document.getElementById('form').elements['NewFont'];

Edit:

The form:

<center>
                            <div id="ambidiv" class="container">
                            <form name="ambiform" id="ambiform" action="javascript:void(-1)">
                            <input type="text" name="theWord" id="theWord" size="35" class="input-hidden" value="Ambigram"><br>

                                  <select id="font" name="NewFont">
                                    <option value="ambimaticv2">AmbimaticHD</option>
                                    <option value="Ambinit">Ambinit</option>
                                    <option disabled>_________</option>
                                    <option value="ambimatic">Ambimatic</option>

                                  </select>

                                <br>
                            <input type="button" value="Generate" onclick="makeAmbi()">
                            </form>
<center>
                            <div id="theView" style="height: 120px; background-color: white;">  </div></center>
                            </div>
                            </center>
                            </div>

Then I want the value from that form to be put into

function drawWords (word1, word2) {
    var letters = [];
    for(i = 0; i < word1.length; i++) {

        var img = document.createElement('img');
        if(isLetter(word1.charAt(i)) && isLetter(word2.charAt(i))) {
            img.setAttribute('style', 'float: left;height:60px;width:50px;');

                var font = document.getElementById('ambiform').value;

            if(font=='ambimatic'){

            var url = 'link' + word1.charAt(i).toLowerCase() + '' + word2.charAt(i).toLowerCase() + '.png';
            }

Answer 1

Maybe something like this?

 const fonts = document.getElementById("fonts") // Listen to the select change fonts.addEventListener("change", e => { // Destructuring the value from the selected option const { value } = e.target // Add font style to the DOM element // 'value.charAt(0).toUpperCase() + value.slice(1)' just to convert the first letter case (not actually needed) heading.style.fontFamily = value.charAt(0).toUpperCase() + value.slice(1) })

 #heading { /* fallback */ font-family: sans-serif }

 <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Oswald&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Raleway&display=swap" rel="stylesheet"> <select id="fonts"> <option value="">Select a Font</option> <option value="roboto">Roboto</option> <option value="lato">Lato</option> <option value="oswald">Oswald</option> <option value="raleway">Raleway</option> </select> <h1 id="heading">Hello world</h1>