更改文本區域的字體系列的功能（使用選項選擇）

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

Answer 2

正如已經指出的，主要問題是style.fontFamily是正確的語法。

為了使您的代碼更好，還需要考慮一些其他事項：

• 選擇更多有用的變量名。 s不是一個很好的選擇。
• 使用事件偵聽器，而不要使用內聯javascript方法調用。
• 將匿名內部函數用於簡單的特定任務。
• 減輕用戶的工作負擔-無需讓用戶按下“提交”按鈕即可完成這樣的簡單任務。
• 使用const或let代替var-使用const告訴其他程序員，該值不會改變
• 使用類而不是ID。
• 聲明所有變量，驗證數據（此處未完成），然后執行操作。

看一下這個JavaScript，它更短，更易讀。

 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>