Question

我有一个简单的脚本，它不会改变textarea的文本颜色。请参阅以下代码：

<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

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

我认为你正试图改变背景颜色，不是吗？

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

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

Answer 3

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

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

Answer 4

你忘了打开{for white function

这样做

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

Answer 5

您需要将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 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>

使用Javascript更改textarea的颜色

6 个答案: