JS脚本无法触发执行，生成随机十六进制色修改类元素背景功能失效

问题原因 #

你的代码存在3处核心错误导致效果不生效：

• 函数内return color语句优先级高于后续样式设置代码，return执行后后面的代码永远不会运行，属于无效逻辑
• document.getElementsByClassName("para")返回的是包含所有匹配类名元素的伪数组集合，不能直接对整个集合设置style属性，需要遍历逐个操作每个元素
• 你在样式设置语句里再次调用get_random_color()，会形成无限递归，直接触发栈溢出报错

修正后代码 #

<!DOCTYPE html>
<html>
<head></head>
<body onload="initColor()">
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p>
    <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis.</p>
    <script>
        // 单独抽离生成随机颜色的工具函数
        function get_random_color(){
            var letters ='0123456789ABCDEF'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.round(Math.random() * 15)];
            }
            return color;
        }
        // 页面加载完成后执行的初始化函数
        function initColor() {
            var paraList = document.getElementsByClassName("para");
            // 遍历所有p元素逐个设置背景色
            for(var i = 0; i < paraList.length; i++) {
                paraList[i].style.backgroundColor = get_random_color();
            }
        }
    </script>
</body>
</html>

如果想要所有para元素使用同一个随机背景色，只需要把get_random_color()的调用提到循环外面，赋值给变量后再给每个元素设置即可。

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