window.onloadは2つの異なる関数に設定したときに1つの関数しか実行しません

Question

これらの2つのスクリプトで問題が発生しました。下の関数にスクリプトがあるかのように見えます。底が働く上：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> 

を下回っているが、バッジには、私はそこにしようと文句を言わない場合は、window.onloadに2つのアクションを割り当てているダウン

Answer 1

をドロップ。一番下のものは、それが割り当てられた最後のものであるため（したがって、前の関数割り当てをオーバーライドしているため）、常に実行されます。あなたは1に2つのオンロードのアクションをマージになっているはずです

は、このようなビット：

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

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