RGB-16转RGB-8脚本封装为函数时forEach报错问题求助

报错原因 #

1. 参数类型不匹配：调用convert时传入的是字符串（如'system41'），但函数内直接将palette当作数组调用forEach方法——字符串没有forEach，因此触发错误。
2. DOM选择器逻辑错误：即使palette是数组，用#${palette}拼接选择器也会生成无效ID（数组转字符串会变成逗号分隔的内容），无法正确定位DOM元素。

修复后的代码 #

JavaScript部分

const system41 = [
  [65535, 65535, 65535],
  [64512, 62333,  1327],
  [65535, 25738,   652]
];

const system7 = [
  [65535, 65535, 52428],
  [65535, 52428, 39321],
  [52428, 39321, 26214]
];

function convert(paletteData, targetId) {
    const targetElement = document.querySelector(`#${targetId}`);
    // 先清空原有内容，避免重复调用叠加
    targetElement.innerHTML = '';
    paletteData.forEach((child) => {
        const rgb8 = child.map(value => Math.round(value / 257));
        targetElement.innerHTML += rgb8.join(', ') + '\n';
    });
}

convert(system41, 'system41');
convert(system7, 'system7');

HTML部分（无需修改）

<p>System 4.1 system colors</p>
<pre id="system41"></pre>

<p>System 7 icon colors</p>
<pre id="system7"></pre>

关键修改点 #

• 函数新增targetId参数，明确区分调色板数据和目标DOM元素的ID
• 调用函数时直接传入定义好的数组变量（而非字符串），确保paletteData是数组类型，可以正常调用forEach
• 提前获取目标DOM元素，避免循环内重复查询DOM，提升性能
• 初始化时清空元素内容，防止多次调用时内容重复叠加

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