开发者

window.onload only running one function when I set it to two different functions

问答 作者：

I am getting a problem with these two scripts I coded, it appears as though whichever script is on the bottom functions, so if I switch them around the one on bottom works. Please help. Code is below:

<script type="text/javascript">
window.onload = function() {
//Badge
var eSelect = document.getElementById('leftbadge');
        var yellowplate = document.getElementById('numberplateyellow');
        var whiteplate = document.getElementById('numberplatewhite');
        eS开发者_高级运维elect.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>

So in this example the font will change but the badges wont if I try there drop down

You're assigning 2 actions to the window.onload. The bottom one will always execute because that is the last one that is assigned to (and hence, it has overriden the previous function assignment).

You should look into merging the 2 onload actions into 1, a bit like this:

<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>

I think you need to use addEventListener. If I'm not mistaken, when you set window.onload, you replace whatever was there instead of add another listener for the onload event.

check this link out. https://developer.mozilla.org/en/DOM/element.addEventListener

<script type="text/javascript">
window.addEventListener("load", 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.addEventListener("load",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>

继续阅读：dom-eventsjavascript

更多精彩内容

0

上一篇:

下一篇:

精彩评论

暂无评论...
登录 注册
Qedev.com
验证码 换一张
取 消

最新问答

问答排行榜

法律声明：本站内容均为网友上传，网站举办方负责审核和监督，

如存在版权或非法内容，欢迎举报，我们将尽快予以删除。

Copyright © 2018-2020 开发者. All rights reserved.

Powered by 开发者

ICP备案号： 京ICP备10032868号-9