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

【问题标题】：Change color of textarea with Javascript使用 Javascript 更改文本区域的颜色
【发布时间】：2016-05-06 01:10:43
【问题描述】：

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

<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 html css textarea textcolor

【解决方案1】：

你需要把你的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>

【讨论】：

这适用于你，但不适用于我。任何 css 样式都可以产生这样的效果吗？
@AntonKoenig 如果您在 Stack Overflow 上运行它，它对您不起作用吗？适用于我的所有浏览器

【解决方案2】：

使用更好的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

【讨论】：

【解决方案3】：

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

尝试将style.color改为style.background：

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

【讨论】：

【解决方案4】：

您忘记为白色功能打开 {

这样做

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

【讨论】：

对此感到抱歉。这只是一个格式错误，不在我的真实代码中，只是在问题中。它没有解决我的问题
@AntonKoenig 您还需要将javascript放在<script>标签之间

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

因此，作为记录，如果我将在您的问题中看到的代码准确地粘贴到文件中并将其保存为 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>

【讨论】：