javascript - 使用括号，两个 <scripts> 不能在 html 文件中一起工作？

Question

首先我想说的是，我对 javascript 几乎一无所知，而且只懂一点 HTML/CSS。无论如何，我在一个学校元素的 Brackets 中打开了一个 HTML 文件，我正在使用来自 w3school 的两个代码。它们单独工作，但如果我的 HTML 文件中有两个脚本，则只有一个工作。我想知道如何解决这个问题？

这是我想要的两个不能一起工作的代码

<script>
    window.onscroll = function() {
        myFunction()
    };

    var nav = document.getElementById("nav");
    var sticky = nav.offsetTop;

    function myFunction() {
        if (window.pageYOffset >= sticky) {
            nav.classList.add("sticky")
        } else {
            nav.classList.remove("sticky");
        }
    }
</script>

和

<script>
    window.onscroll = function() {
        scrollFunction()
    };

    function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0) {
            document.getElementById("myBtn").style.display = "block";
        } else {
            document.getElementById("myBtn").style.display = "none";
        }
    }

    function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
    }
</script>

我想同时使用这两个脚本并让它们在我的 html 文件中协同工作。

同样，这两个代码本身都可以正常工作，但是当我的 html 文件中同时包含这两个代码时，只有一个代码可以工作。

提前致谢!

Answer 1

只有一个有效的原因是您要用第二个任务替换第一个任务。由于在任何给定时间只有一个函数可以是 window.onscroll 的值，因此第二个赋值将始终覆盖第一个。您可以在浏览器中使用如下内容查看此内容:

document.addEventListener('DOMContentLoaded', function () {
  window.onscroll = function () {
    console.log('ONE')
  }

  window.onscroll = function () {
    console.log('TWO')
  }
})

通过使用 addEventListener，您可以在事件触发时调用多个函数:

  window.bindEventListener('scroll', function () {
    console.log('ONE')
  }

  window.bindEventListener('scroll', function () {
    console.log('TWO')
  }