Question

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

我遇到了与JS有关的问题 - 无论哪个代码列在第二个都有效，所以模式框出现在视频结束于移动版或桌面版之后，但不是两者都有。我现在明白脚本是冲突的，所以第二个工作而不是第一个。

我寻找解决冲突的解决方案，但我找到的并不起作用。然后我尝试使用基于屏幕宽度（Change div content if screen resolution is less than?）的if else语句，但这也没有用。

以下是我的两个相互矛盾的脚本：

移动

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

桌面

window.onload = function（）{document.getElementById（'myVideo'）。addEventListener（'ended'，showRatings）; function showRatings（）{document.getElementsByClassName（“modalAppear”）[0] .style.display ='block';}}

或者看：http://codepen.io/anon/pen/gPoqjd?editors=011

如何将它们组合起来，无论我是在移动设备还是桌面上，都可以将它们组合起来？

提前致谢

Answer 1

不要将内容分配给window.onload。它只能容纳一个功能。

改为使用addEventListener。

＆＃13;

addEventListener('load', function(event) {
  console.log("Function 1");
});
addEventListener('load', function(event) {
  console.log("Function 2");
});

＆＃13;

如何使用冲突的脚本标记解决此问题？

1 个答案: