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

  • Z时代
  • 2024-01-10
  • 分类：问答

我想说的是，当谈到javascript时，我几乎无所不知，而只是一个小小的HTML/CSS。无论如何，我在Brackets中为一个学校项目打开了一个HTML文件，我使用了w3school的两个代码。他们单独工作，但如果我在我的HTML文件中有两个脚本，则只有一个工作。我想知道如何解决这个问题？使用括号，两个<scripts>不能在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文件中都有，但只有一个可以工作。

预先感谢您！

回答：

看到代码的合并版本，虽然我不知道你在做什么topFunction()看起来不喜欢被使用。

var nav = document.getElementById("nav"); 
var sticky = nav.offsetTop; 
window.addEventListener('scroll', function() { 
    //class list for nav element 
    var navClassList = nav.classList; 
    //btn 
    var myBtn = document.getElementById("myBtn"); 
    //sticky enable 
    var stickyOn = (window.pageYOffset >= sticky); 
    if (stickyOn) { 
     navClassList.add("sticky") 
    } else { 
     navClassList.remove("sticky"); 
    } 
    //is button view port 
    var isButtonViewPort = (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0); 
    if (isButtonViewPort) { 
     myBtn.style.display = "block"; 
    } else { 
     myBtn.style.display = "none"; 
    } 
}); 
function topFunction() { 
    document.body.scrollTop = 0; 
    document.documentElement.scrollTop = 0; 
}

回答：

您正在重写窗口的滚动事件，每次您为其分配函数。 有两种解决方案：

1-使用addEventListener方法，其添加其中传递作为第二个参数的函数，作为一个处理程序事件传递作为第一个参数：

例如：

var nav = document.getElementById("nav");  
var sticky = nav.offsetTop;  
function myFunction() {  
    if (window.pageYOffset >= sticky) {  
    nav.classList.add("sticky")  
    } else {  
    nav.classList.remove("sticky");  
    }  
}  
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;  
}  
// Adding each function as a handler to event listener of scroll  
window.addEventListener('scroll', myFunction);  
window.addEventListener('scroll', topFunction);

2-合并两个功能到一个单一的功能，并指定为您

以前那样

例如：

var nav = document.getElementById("nav");  
var sticky = nav.offsetTop;  
function thingsToDoOnScroll() {  
\t // First function body  
\t if (window.pageYOffset >= sticky) {  
    nav.classList.add("sticky")  
    } else {  
    nav.classList.remove("sticky");  
    }  
    // Second function body  
    document.body.scrollTop = 0;  
    document.documentElement.scrollTop = 0;  
}  
function scrollFunction() {  
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 0) {  
     document.getElementById("myBtn").style.display = "block";  
    } else {  
     document.getElementById("myBtn").style.display = "none";  
    }  
}  
window.scroll = thingsToDoOnScroll;

回答：

的原因只有一个工作是你正在更换第一个任务与第二个任务。由于在任何给定时间只有一个函数可以是window.onscroll的值，所以第二个赋值将始终覆盖第一个。您可以使用类似以下的在浏览器中看到这一点：

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

以上是 使用括号，两个&lt;scripts&gt;不能在html文件中一起使用？ 的全部内容， 来源链接： utcz.com/qa/258178.html

回到顶部