JS与HTML组合代码运行失效，前端初学者求助排查错误原因

错误排查 #

你的代码有两处明显错误：

• 事件绑定逻辑错误：document.querySelector('#red').onclick = redf(); 中给函数名加了括号，会在代码运行到这一行时直接执行redf，把函数返回的undefined赋值给点击事件回调，而非绑定函数本身，正确写法是去掉括号，仅写函数名redf。
• 样式赋值语法错误：DOM元素的style是样式对象，不能直接赋值为颜色字符串，需要指定具体样式属性，修改文字颜色要写style.color = 'red'。

修正后代码 #

JavaScript代码 #

document.addEventListener('DOMContentLoaded', function() {
  function redf() {
    document.querySelector('h1').style.color = 'red';
  };
  document.querySelector('#red').onclick = redf;
});

HTML代码（无改动） #

<h1>Hello, World!</h1>
<div>
  <button id="red" style="color: red;">Red</button>
  <button id="blue" style="color: blue;">Blue</button>
  <button id="green" style="color: springgreen;">Green</button>
</div>

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