Javascript 如何解决脚本标记冲突的问题？

我整个星期都在研究这个问题，但我自己无法解决，所以我非常感谢您能提供的任何帮助。我使用HTML、JS和CSS在视频结束后在网页上显示一个模式框。但是，由于格式问题，我需要为移动设备使用不同的视频和模式框。我添加了新的HTML和CSS，这样正确的视频和模式框只会出现在桌面版和移动版上

不过，我对JS有一些问题——无论第二个列出的是哪种代码，都会起作用，所以在移动版或桌面版视频结束后会出现模式框，但不是两者都会出现。我现在了解到脚本之间存在冲突，因此第二个脚本可以工作，而不是第一个脚本

我寻找解决冲突的办法，但我发现没用。然后，我尝试使用基于屏幕宽度（）的if-else语句，但这也不起作用

以下是我的两个冲突脚本：

移动

window.onload=function（）{document.getElementById（'mobileVideo'）。addEventListener（'ended'，showmobileRatings）；function showmobileRatings（）{document.getElementsByClass（“modalmobile”）[0]。style.display='block'；} 桌面

window.onload=function（）{document.getElementById（'myVideo'）。addEventListener（'ended'，showRatings）；function showRatings（）{document.getElementsByCassName（“modalAppear”）[0]。style.display='block'；} 或参阅：

无论我是在移动设备上还是在台式机上，我如何将它们结合起来，使它们都能工作

---

提前感谢

不要将内容分配到

窗口。onload

。它只能容纳一个功能

改用

addEventListener

addEventListener（'load'，函数（事件）{
控制台日志（“功能1”）；
});
addEventListener（'load'，函数（事件）{
控制台日志（“功能2”）；
});这些脚本首先是如何放在页面上的？