Question

我需要制作一个程序，当我从下拉列表中选择任何字体系列，字体大小，背景颜色和文本颜色时，应该对textarea中的文本进行相同的更改。截至目前，如果我更改背景颜色，只有更改，文本区域不会发生任何其他事情。请帮忙。

<html>

<head>
<title>Binding</title>
</head>

<body>
 <script>
    function changeColor() {
        var newColor = document.getElementById('bgColorPicker').value;
        document.bgColor = newColor;
    }

    function changeFont(){
        var newFont=document.getElementById('fontPicker').value;
        document.getElementById('textarea').style.fontStyle=newFont;
    }

    function changeFontSize(){
        var newFontSize=document.getElementById('fontSizePicker').value;
        document.getElementById('textarea').style.fontSize=newFontSize;
    }

    function changeTextColor(){
        var newTextColor=document.getElementById('textColorPicker').value;
        document.getElementById('textarea').color=newTextColor;
    }
</script>

<select id="bgColorPicker" onchange="changeColor()">
    <option value="transparent">--Select--</option>
    <option value="#FFFF99">Yellow</option>
    <option value="#0099CC">Blue</option>
    <option value="limegreen"> Green</option>
</select>
<br>
<select id="fontPicker" onchange="changeFont()">
    <option value="transparent">--Select--</option>
    <option value="Arial">Yellow</option>
    <option value="Verdana">Blue</option>
    <option value="Georgia"> Green</option>
</select>
<br>
<select id="textColorPicker" onchange="changeTextColor()">
    <option value="transparent">--Select--</option>
    <option value="#DAA520">GoldenRod</option>
    <option value="#6B8E23">OliveDrab</option>
    <option value="#DC143C">Crimson</option>
</select>
<select id="fontSizePicker" onchange="changeFontSize()">
        <option value="transparent">--Select--</option>
        <option value="100px">Large</option>
        <option value="50px">Medium</option>
        <option value="20px">Small</option>
    </select>

    TextArea:<textarea name='textarea'  rows='15' cols='50'></textarea>

</body>

</html>

Answer 1

您忘记将id添加到textarea
document.getElementById('textarea').color应为document.getElementById('textarea').style.color
document.getElementById('textarea').style.fontStyle应为document.getElementById('textarea').style.fontFamily

＆＃13;

function changeColor() {
  var newColor = document.getElementById('bgColorPicker').value;
  document.bgColor = newColor;
}

function changeFont() {
  var newFont = document.getElementById('fontPicker').value;
  document.getElementById('textarea').style.fontFamily = newFont;
}

function changeFontSize() {
  var newFontSize = document.getElementById('fontSizePicker').value;
  document.getElementById('textarea').style.fontSize = newFontSize;
}

function changeTextColor() {
  var newTextColor = document.getElementById('textColorPicker').value;
  document.getElementById('textarea').style.color = newTextColor;
}

＆＃13;

<select id="bgColorPicker" onchange="changeColor()">
    <option value="transparent">--Select--</option>
    <option value="#FFFF99">Yellow</option>
    <option value="#0099CC">Blue</option>
    <option value="limegreen"> Green</option>
</select>
<br>
<select id="fontPicker" onchange="changeFont()">
    <option value="transparent">--Select--</option>
    <option value="Arial">Arial</option>
    <option value="Verdana">Verdana</option>
    <option value="Georgia"> Georgia</option>
</select>
<br>
<select id="textColorPicker" onchange="changeTextColor()">
    <option value="transparent">--Select--</option>
    <option value="#DAA520">GoldenRod</option>
    <option value="#6B8E23">OliveDrab</option>
    <option value="#DC143C">Crimson</option>
</select>
<select id="fontSizePicker" onchange="changeFontSize()">
        <option value="transparent">--Select--</option>
        <option value="100px">Large</option>
        <option value="50px">Medium</option>
        <option value="20px">Small</option>
    </select> TextArea:

<textarea name='textarea' id="textarea" rows='15' cols='50'></textarea>

＆＃13;

根据选择

1 个答案: