html中onclick误区，后续变量会更改怎么办？

肖。35487870942026-02-20 9:44

【备注】这只是一部分，abcd4个变量都是数组，这段代码后面要用到合起来的数组。

【解决的问题】变量a被改了，弹窗内容会出错！

错误代码（受到变量的影响不安全）

javascript 复制代码

document.querySelector('a').onclick = () => alert('极品\n' + a.join('\n') + '\n高级\n' + b.join('\n') + '\n普通\n' + c.join('\n') + '\n垃圾\n' + d.join('\n'));
a = [...a, ...b, ...c, ...d]

正确代码（内容不变已锁死）

javascript 复制代码

document.querySelector('a').onclick = new Function(`alert(\`极品\n${a.join('\n')}\n高级\n${b.join('\n')}\n普通\n${c.join('\n')}\n垃圾\n${d.join('\n')}\`)`);
a = [...a, ...b, ...c, ...d]

如何将内容锁死，后续无论变量怎么变化，弹窗内容也不会变的？

1：这是源代码要转义。

javascript 复制代码

alert(`极品\n${a.join('\n')}\n高级\n${b.join('\n')}\n普通\n${c.join('\n')}\n垃圾\n${d.join('\n')}`)

2：转义两个地方即可。

javascript 复制代码

alert(\`极品\n${a.join('\n')}\n高级\n${b.join('\n')}\n普通\n${c.join('\n')}\n垃圾\n${d.join('\n')}\`)

3：加上Function将文本转代码。

javascript 复制代码

new Function(`alert(\`极品\n${a.join('\n')}\n高级\n${b.join('\n')}\n普通\n${c.join('\n')}\n垃圾\n${d.join('\n')}\`)`)

4：最后添加上事件即可。

javascript 复制代码

document.querySelector('a').onclick = new Function(`alert(\`极品\n${a.join('\n')}\n高级\n${b.join('\n')}\n普通\n${c.join('\n')}\n垃圾\n${d.join('\n')}\`)`)

为什么要写死代码？

让弹窗显示的内容不受变量影响！
这是一个小细节哦～出了错误我找了好久，后来才发现这个错误。
onclick点击事件中用到的变量是实时获取的，不是不变的。
当时我还在问：设置了内容为什么它显示的不对？后来才知道是变量后续被修改了。