JavaScript实现彩虹文字时如何循环遍历颜色数组适配任意长度输入

你的代码直接用循环下标i读取colors数组，当字符数超过6个时，i的值超出数组索引范围，读取到的是undefined，后续字符自然无法应用颜色样式。

用取模运算符%计算颜色索引即可循环复用颜色数组：当前颜色索引 = 字符循环下标 % 颜色数组长度，无论输入多长的字符都能循环套用彩虹配色。
顺便帮你修了原代码里的几个隐性问题：

• 未声明循环变量、DOM元素变量，会意外污染全局作用域
• 每个字符用<p>标签包裹会强制换行，彩虹横排文字用<span>标签更合理
• 增加了重复点击按钮时清空容器的逻辑，避免多次触发重复追加内容
• 增加了用户点取消输入时的退出判断，避免空值报错

function button(){
   const name = window.prompt("Insert your name");
   if (!name) return;
   const nameArray = Array.from(name);
   const colors = ["red", "orange", "yellow", "green", "blue", "purple"];
   const nameContainer = document.getElementById("namediv");
   nameContainer.innerHTML = "";

   for (let i = 0; i < nameArray.length; i++) {
      const charEl = document.createElement("span");
      charEl.textContent = nameArray[i];
      // 核心逻辑：取模循环取色
      charEl.style.color = colors[i % colors.length];
      nameContainer.appendChild(charEl);
   }
}

取模运算返回的是两数相除的余数，下标递增时会自动循环匹配颜色：

• 前6个字符下标0-5，取模结果0-5，依次对应红、橙、黄、绿、蓝、紫
• 第7个字符下标6，6%6=0，回到第一个红色
• 第8个字符下标7，7%6=1，匹配第二个橙色
  按这个规律无限循环，多长的文本都能正常渲染彩虹效果。

内容的提问来源于stack exchange，提问作者André Costa