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

时间:2018-08-26 08:01:24

标签: javascript html css

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

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

        location ~ ^/(css/|js/) {
                root /var/www/myblog/app/resources/public/;
        }

css代码:

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>

2 个答案:

答案 0 :(得分: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...");
}

答案 1 :(得分:0)

正如已经指出的,主要问题是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>