HTML+JavaScript新手：点击按钮修改文本颜色代码不生效如何解决？

现有代码的错误点 #

• 事件绑定错误：JS中button.onclick = changeColor()加了括号，会在页面加载时直接执行函数，把返回的undefined赋值给点击事件，点击按钮时根本不会触发对应逻辑；同时HTML标签上的onclick="changeColor"写法也错误，调用函数需要加括号，而且你已经在JS中绑定事件，重复绑定反而容易出问题，建议直接删掉HTML里的onclick属性。
• 变量逻辑错误：你提前取document.getElementById("TEXT").style.color拿到的是颜色值字符串，是值传递不是引用传递，后续修改这个变量根本不会影响到DOM元素本身的样式；而且style.color只能读取元素行内style属性里设置的颜色，默认没写行内样式的话拿到的是空字符串。
• 函数逻辑错误：changeColor的参数color是局部变量，你给它赋值完全不会修改到页面文本的样式；另外你需求是切换为红色，代码里写的#0EE5D0是青色，不符合需求。

修正后的代码 #

HTML文件 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First Page</title>
</head>
<body>
    <button id="BUTTON">Click me</button>
    <p id="TEXT">Text</p>
</body>
<script src="first.js"></script>
</html>

first.js文件（点击切换为红色） #

var button = document.getElementById("BUTTON");
// 直接存储文本元素的DOM引用，不要只存颜色值
var textEle = document.getElementById("TEXT");

function changeColor() {
    textEle.style.color = "red";
};
// 绑定事件只写函数名，不要加括号
button.onclick = changeColor;

如果需要实现点击来回切换黑/红的效果，可以把changeColor函数修改为：

function changeColor() {
    textEle.style.color = textEle.style.color === 'red' ? 'black' : 'red';
}

内容的提问来源于stack exchange，提问作者Sam_Pam