window.onload只在我将其设置为两个不同的函数时运行一个函数

时间：2011-05-12 13:15:33

标签： javascript html javascript-events

我遇到了我编码的这两个脚本的问题，看起来好像底部函数上的哪个脚本，所以如果我在底部的那个上面切换它们：S请帮助代码在下面

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

所以在这个例子中，字体会改变，但是如果我在那里尝试下降那么徽章

2 个答案:

答案 0 :(得分：4)

您正在为window.onload分配2个操作。底部将始终执行，因为这是分配给的最后一个（因此，它已覆盖先前的函数赋值）。

你应该考虑将2个onload动作合并为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>

答案 1 :(得分：2)

我认为你需要使用addEventListener。如果我没有弄错的话，当你设置window.onload时，你会替换那里的东西，而不是为onload事件添加另一个监听器。

检查此链接。 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>
相关问题
最新问题