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');
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>
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: