javascript - 更改文本区域字体系列的功能(使用选项选择)

Question

我有一个文本字段、选项选择、一个提交按钮和文本区域，其中在文本字段中输入的任何内容都将显示在文本区域 onclick 上。然后，根据所选选项，textarea 样式属性也会发生变化。如您所见，它不会根据所选选项而改变。

这是我的代码。我真的被困在这里了，我两周前才开始编码，所以我对这里只有一点了解。你能告诉我这里出了什么问题吗？

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 代码:

@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

正确的语法是:style.fontFamily。

示例:

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

简化您的代码:

由于您要应用从所选值中检索到的字体名称，因此请直接应用它。

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...");
}