为什么setInterval定时执行时无法正常修改元素颜色？

编写addElements()函数，预期实现三项效果：

• 随机切换id为img的图片资源
• 修改页面body的背景颜色
• 修改id为name的p标签文本颜色
  实际运行时，setInterval能按照4321ms的间隔无限轮播切换图片，但所有颜色修改逻辑一次都未生效，对应实现代码如下：

function addElements() {
  var img = document.getElementById('img');
  var image = images[Math.floor(Math.random() * images.length)];
  img.src = image;

  var name = document.getElementById('name');
  var color = colors = colors[Math.floor(Math.random() * colors.length)];
  document.body.style.backgroundColor = color;
  name.setAttribute('color', color);
};

window.addEventListener('load', setInterval(addElements, 4321));

代码里有三个直接导致颜色逻辑失效的问题：

1. 事件绑定写法错误：addEventListener第二个参数需要传入函数，但代码直接写了setInterval(addElements, 4321)，这行代码在绑定事件时就会立刻执行启动定时器，把定时器返回的数字ID当做事件回调注册，完全没等页面load完成就开始跑逻辑，首次执行时DOM元素可能还未解析完成，样式赋值直接报错中断。
2. 变量覆盖bug：var color = colors = colors[xxx]的连续赋值写法，第一次成功执行函数时就会把原本存储颜色列表的colors数组，直接覆盖成第一次随机取到的单个颜色字符串。第二次及之后执行函数时，colors已经不是数组，对字符串按下标取值只能拿到单个字符，不是合法的颜色值，赋值给样式属性自然不会生效。
3. DOM属性用法错误：<p>标签没有原生color属性，setAttribute('color', color)的写法是给标签加了一个无效的自定义属性，根本不会修改文本样式。早期<font>标签的color属性早已被废弃，所有元素的文本颜色都应该通过样式接口设置。

// 提前全局定义图片、颜色列表，注意不要在函数内部覆盖这两个数组
const images = [/* 填入你的图片地址列表 */];
const colors = [/* 填入你的合法颜色值列表 */];

function addElements() {
  const img = document.getElementById('img');
  const randomImg = images[Math.floor(Math.random() * images.length)];
  img.src = randomImg;

  const nameDom = document.getElementById('name');
  // 单独声明变量存储随机颜色，不要覆盖原数组
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  document.body.style.backgroundColor = randomColor;
  // 通过style接口设置p标签文本颜色
  nameDom.style.color = randomColor;
}

window.addEventListener('load', () => {
  // 等页面加载完成后再启动定时器
  setInterval(addElements, 4321);
})

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