javascript - 当我将 window.onload 设置为两个不同的函数时，它仅运行一个函数

Question

我编码的这两个脚本出现问题，看起来好像哪个脚本位于底部函数，所以如果我将它们切换到底部的脚本就可以了。请帮忙。代码如下:

<script type="text/javascript">
window.onload = function() {
//Badge
var eSelect = document.getElementById('leftbadge');
        var yellowplate = document.getElementById('numberplateyellow');
        var whiteplate = document.getElementById('numberplatewhite');
        eSelect.onchange = function() {
            if(eSelect.selectedIndex === 0) {
                yellowplate.style.backgroundImage = 'url("builder/yellow_bg.png")';
                whiteplate.style.backgroundImage = 'url("builder/white_bg.png")';
                yellowplate.style.textAlign = 'center';
                yellowplate.style.paddingRight = '0';
                whiteplate.style.textAlign = 'center';
                whiteplate.style.paddingRight = '0';
            }else if(eSelect.selectedIndex === 1) {
                yellowplate.style.backgroundImage = 'url(builder/yellow_bg_ENG.png)';
                whiteplate.style.backgroundImage = 'url(builder/white_bg_ENG.png)';
                //Align To Right and then add padding
                yellowplate.style.textAlign = 'right';
                yellowplate.style.paddingRight = '10px';
                whiteplate.style.textAlign = 'right';
                whiteplate.style.paddingRight = '10px';
            }else if(eSelect.selectedIndex === 2) {
                yellowplate.style.backgroundImage = 'url(builder/yellow_bg_GB.png)';
                whiteplate.style.backgroundImage = 'url(builder/white_bg_GB.png)';
                //Align To Right and then add padding
                yellowplate.style.textAlign = 'right';
                yellowplate.style.paddingRight = '10px';
                whiteplate.style.textAlign = 'right';
                whiteplate.style.paddingRight = '10px';
            }else if(eSelect.selectedIndex === 3) {
                yellowplate.style.backgroundImage = 'url(builder/yellow_bg_GB2.png)';
                whiteplate.style.backgroundImage = 'url(builder/white_bg_GB2.png)';
                //Align To Right and then add padding
                yellowplate.style.textAlign = 'right';
                yellowplate.style.paddingRight = '10px';
                whiteplate.style.textAlign = 'right';
                whiteplate.style.paddingRight = '10px';
            }else if(eSelect.selectedIndex === 4) {
                yellowplate.style.backgroundImage = 'url(builder/yellow_bg_SCO.png)';
                whiteplate.style.backgroundImage = 'url(builder/white_bg_SCO.png)';
                //Align To Right and then add padding
                yellowplate.style.textAlign = 'right';
                yellowplate.style.paddingRight = '10px';
                whiteplate.style.textAlign = 'right';
                whiteplate.style.paddingRight = '10px';
            }else if(eSelect.selectedIndex === 5) {
                yellowplate.style.backgroundImage = 'url(builder/yellow_bg_CYMRU.png)';
                whiteplate.style.backgroundImage = 'url(builder/white_bg_CYMRU.png)';
                //Align To Right and then add padding
                yellowplate.style.textAlign = 'right';
                yellowplate.style.paddingRight = '10px';
                whiteplate.style.textAlign = 'right';
                whiteplate.style.paddingRight = '10px';
            }
        }
}
</script>
<script type="text/javascript">
//Font
        window.onload = function() {
        var eSelect = document.getElementById('font');
        var yellowplate = document.getElementById('numberplateyellow');
        var whiteplate = document.getElementById('numberplatewhite');
        eSelect.onchange = function() {
            if(eSelect.selectedIndex === 0) {
                yellowplate.style.fontFamily = 'JepsonCarRegular';
                whiteplate.style.fontFamily = 'JepsonCarRegular';
            } else {
                yellowplate.style.fontFamily = 'twotoneRegular';
                whiteplate.style.fontFamily = 'twotoneRegular';
            }
        }
    }
</script>

所以在这个例子中，字体会改变，但如果我尝试下拉，徽章不会改变

Answer 1

您正在为 window.onload 分配 2 个操作。底部的函数将始终执行，因为它是最后一个被分配的函数(因此，它覆盖了先前的函数分配)。

您应该考虑将 2 个加载操作合并为 1 个，有点像这样:

<script type="text/javascript">
function handleBadges()
{
    //Badge
    var eSelect = document.getElementById('leftbadge');
    var yellowplate = document.getElementById('numberplateyellow');
    var whiteplate = document.getElementById('numberplatewhite');
    eSelect.onchange = function() 
    {
        if(eSelect.selectedIndex === 0) {
            yellowplate.style.backgroundImage = 'url("builder/yellow_bg.png")';
            whiteplate.style.backgroundImage = 'url("builder/white_bg.png")';
            yellowplate.style.textAlign = 'center';
            yellowplate.style.paddingRight = '0';
            whiteplate.style.textAlign = 'center';
            whiteplate.style.paddingRight = '0';
        }else if(eSelect.selectedIndex === 1) {
            yellowplate.style.backgroundImage = 'url(builder/yellow_bg_ENG.png)';
            whiteplate.style.backgroundImage = 'url(builder/white_bg_ENG.png)';
            //Align To Right and then add padding
            yellowplate.style.textAlign = 'right';
            yellowplate.style.paddingRight = '10px';
            whiteplate.style.textAlign = 'right';
            whiteplate.style.paddingRight = '10px';
        }else if(eSelect.selectedIndex === 2) {
            yellowplate.style.backgroundImage = 'url(builder/yellow_bg_GB.png)';
            whiteplate.style.backgroundImage = 'url(builder/white_bg_GB.png)';
            //Align To Right and then add padding
            yellowplate.style.textAlign = 'right';
            yellowplate.style.paddingRight = '10px';
            whiteplate.style.textAlign = 'right';
            whiteplate.style.paddingRight = '10px';
        }else if(eSelect.selectedIndex === 3) {
            yellowplate.style.backgroundImage = 'url(builder/yellow_bg_GB2.png)';
            whiteplate.style.backgroundImage = 'url(builder/white_bg_GB2.png)';
            //Align To Right and then add padding
            yellowplate.style.textAlign = 'right';
            yellowplate.style.paddingRight = '10px';
            whiteplate.style.textAlign = 'right';
            whiteplate.style.paddingRight = '10px';
        }else if(eSelect.selectedIndex === 4) {
            yellowplate.style.backgroundImage = 'url(builder/yellow_bg_SCO.png)';
            whiteplate.style.backgroundImage = 'url(builder/white_bg_SCO.png)';
            //Align To Right and then add padding
            yellowplate.style.textAlign = 'right';
            yellowplate.style.paddingRight = '10px';
            whiteplate.style.textAlign = 'right';
            whiteplate.style.paddingRight = '10px';
        }else if(eSelect.selectedIndex === 5) {
            yellowplate.style.backgroundImage = 'url(builder/yellow_bg_CYMRU.png)';
            whiteplate.style.backgroundImage = 'url(builder/white_bg_CYMRU.png)';
            //Align To Right and then add padding
            yellowplate.style.textAlign = 'right';
            yellowplate.style.paddingRight = '10px';
            whiteplate.style.textAlign = 'right';
            whiteplate.style.paddingRight = '10px';
        }
    }
}    
function handleFonts()
{
    var eSelect = document.getElementById('font');
    var yellowplate = document.getElementById('numberplateyellow');
    var whiteplate = document.getElementById('numberplatewhite');
    eSelect.onchange = function() {
        if(eSelect.selectedIndex === 0) {
            yellowplate.style.fontFamily = 'JepsonCarRegular';
            whiteplate.style.fontFamily = 'JepsonCarRegular';
        } else {
            yellowplate.style.fontFamily = 'twotoneRegular';
            whiteplate.style.fontFamily = 'twotoneRegular';
        }
    }
}
window.onload = function() 
{
    handleBadges()
    handleFonts()
}
</script>