使用 Javascript 更改文本区域的颜色

Question

我有一个简单的脚本，它不会改变文本区域的文本颜色。请看下面的代码：

<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
    function black() {
        document.getElementById("text").style.color="#000000";
    }
        function white() {
        document.getElementById("text").style.color="#ffffff";
    }
</script>

Answer 1

<script>
    function black() {
        document.getElementById("text").style.color="#000000";
    }

    function white() {
        document.getElementById("text").style.color="#ffffff";
    }
</script>

Answer 2

您忘记为白色功能打开{

这样做

function black() {
    document.getElementById("text").style.color="#000000";
}
    function white() {
    document.getElementById("text").style.color="#ffffff";
}

Answer 3

您需要将 javascript 放在 script 标签内。

请参阅下面的工作演示。

<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>

<script>

function black() {
    document.getElementById("text").style.color="#000000";
}
    function white() {
    document.getElementById("text").style.color="#ffffff";
}

</script>

为了避免将 javascript 放在 script 标签中，您可以将 javascript 添加到 .js 文件中，并在 html 中引用它，如下所示 <script src="example.js"></script>

Answer 4

使用更好addEventListener

document.getElementById('black').addEventListener("click", black);
document.getElementById('white').addEventListener("click", white);

在HTML,

<input type="radio" name="text" id="black">B<br/>
<input type="radio" name="text" id="white">W

这是一个fiddle

Answer 5

所以为了记录，如果我将我在你的问题中看到的代码准确地粘贴到一个文件中并将其保存为 test.html 或其他内容，然后在浏览器中打开它，它确实有效。我现在看到的代码是：

<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
    function black() {
        document.getElementById("text").style.color="#000000";
    }
        function white() {
        document.getElementById("text").style.color="#ffffff";
    }
</script>

所以我想在您的真实代码中，这些函数声明实际上在 closure 中。在这种情况下，函数将在事件处理程序将调用它们的范围内未定义。例如，以下内容会在单击单选按钮时在控制台中引发未定义的错误，因为 white 和 black 超出范围。

<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
(function() {
    function black() {
        document.getElementById("text").style.color="#000000";
    }
    function white() {
        document.getElementById("text").style.color="#ffffff";
    }
})()
</script>

您可以通过在 window 上声明全局变量并将值分配给适当的函数来确保这些函数可用于处理程序。例如：

<input type="Radio" name="text" onClick="black();">B<br/>
<input type="Radio" name="text" onClick="white();">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
(function() {
    window.black = function() {
        document.getElementById("text").style.color="#000000";
    }
    window.white = function() {
        document.getElementById("text").style.color="#ffffff";
    }
})()
</script>

这是确保您的函数在全局范围内可用的明确方法，但您也可以简单地从变量名前面删除 window.。

此外，请理解，如果您要从闭包中声明这些变量，例如 var black = function() { ...，那么您将回到开始的地方，函数超出了点击处理程序的范围。

最后，这通常都很丑陋。在全局 window 级别分配变量通常不是一个好主意，尤其是对于 white 和 black 这样的通用名称。它们很容易与代码中的另一个变量发生冲突。以下将是执行此类 IMO 的更好方法。

<input type="Radio" name="text" id="black-radio">B<br/>
<input type="Radio" name="text" id="white-radio">W
<textarea id="text" placeholder="Explanation (Optional)"></textarea>
<script>
(function() {
    var black = function() {
        document.getElementById("text").style.color="#000000";
    }
    var white = function() {
        document.getElementById("text").style.color="#ffffff";
    }
    document.getElementById('black-radio').addEventListener('click', black);
    document.getElementById('white-radio').addEventListener('click', white);
})()
</script>

Answer 6

我认为您正在尝试更改背景颜色，是吗？

尝试将 style.color 更改为 style.background:

function black() {
    document.getElementById("text").style.background = "black";
}
function white() {
    document.getElementById("text").style.background = "white";
}

使用 Javascript 更改文本区域的颜色

Change color of textarea with Javascript

javascript

html

css

textarea

textcolor