更改文本区域的字体系列的功能（使用选项选择）

Question

I have a text field, option select, a submit button and textarea, where whatever inputted in the textfield will be display on the textarea onclick. Then, depending on the selected option, the textarea style property will change also. As you can see it doesn't change according to the selected option.

Heres my code. I really am stuck here, i just started coding just 2 weeks ago, so i only have a little knowledge here. Can you please tell me what was wrong here.

SPELLING:<input id="spell" type="text" onfocus="this.value=''" value="Input 
spelling here." name="spelling">
<button onclick="document.getElementById('spell').value=''";>CLEAR </button> 
<hr />
<select id="selectfonts" name="selectfonts">
    <option selected disabled>Select font here...</option>
    <option value="american" id="american"> American Typewriter </option>
    <option value="bdmod" id="bdmod">BD Modern</option>
    <option value="brush" id="brush">Brush Script</option>
</select>

<button onclick="displayspell(); selectfonts();"> SUBMIT </button>
<hr>
<textarea id="myTextarea" disabled></textarea>
<script>
function displayspell()
{
    var x = document.getElementById("spell").value;
    document.getElementById("myTextarea").innerHTML = x;
}
</script>

<script>
function selectfonts()
{
var s=document.getElementById('selectfonts');
var selectfonts = s.option[s.selectedIndex].value;

    if(selectfonts == 'american')
    {
        document.getElementById('myTextarea').style.font-family ='american';
    }

    else if(selectfonts == 'bdmod')
    {
        document.getElementById('myTextarea').style.font-family = 'bdmod';
    }

    else if(selectfonts == 'brush')
    {
        document.getElementById('myTextarea').style.font-family = 'brush';
    }

    else
    {
        alert('Input spelling or choose font!');
    }       
}
</script>

css code:

@font-face
{   font-family:'american';
    src:url('American Typewriter.ttf') format('truetype');}

@font-face
{   font-family:'bdmod';
    src:url('BASKVILL.TTF') format('truetype');}

@font-face
{   font-family:'brush';
    src:url('BRUSHSCI.TTF') format('truetype');}

#american{font-family:'american';}
#bdmod{font-family: 'bdmod';}
#brush{font-family: 'brush';}

Answer 1

The proper syntax is: style.fontFamily .

Example :

document.getElementById('myTextarea').style.fontFamily = 'brush';

Simplifying your code:

Since you're applying the font name retrieved from the selected value, applying it directly.

function selectfonts()
{
   var s=document.getElementById('selectfonts');
   var selectfonts = s.option[s.selectedIndex].value;
   if(selectfonts != "")
   document.getElementById('myTextarea').style.fontFamily = selectfonts;
   else alert("Please choose a font...");
}

Answer 2

As already pointed out, the main issue is that style.fontFamily is the proper syntax.

Some additional things to look into to make your code better:

• Choose more informative variable names. s is not a very good choice.
• Use event listeners instead of inline javascript method calls.
• Use anonymous inner functions for simple specific tasks.
• Offload work from the user - there is no need to make the user press a submit button for a simple task like this.
• Use const or let instead of var - using const tells other programmers that this value will not be changing
• Use classes instead of ids.
• Declare all variables, validate data (not done here), then perform actions.

Take a look at this javascript which is much shorter and more readable.

 const clearButton = document.getElementsByClassName('clear-button')[0], spellingInput = document.getElementsByClassName('spelling-input')[0], fontsSelect = document.getElementsByClassName('fonts-select')[0], styledTextArea = document.getElementsByClassName('styled-text-area')[0]; clearButton.addEventListener('click', function() { spellingInput.value = ''; styledTextArea.value = ''; }); spellingInput.addEventListener('input', function() { styledTextArea.value = spellingInput.value; }); fontsSelect.addEventListener('change', function() { styledTextArea.style.fontFamily = fontsSelect.value; }); 

 <label>SPELLING:</label><input class="spelling-input" type="text" placeholder="Input spelling here."> <button class="clear-button">CLEAR</button> <hr /> <select class="fonts-select"> <option selected disabled>Select font here...</option> <option value="sans-serif">sans-serif</option> <option value="serif">serif</option> <option value="monospace">monospace</option> </select> <hr> <textarea class="styled-text-area" disabled></textarea>