我寫了兩個 js 腳本，它們都可以工作，但問題是只有代碼中第二個可以工作

Question

我第一次嘗試開發電子商務網站，但在這里我寫了兩個腳本

正如您在圖片中看到的那樣，它運行良好，但只有第二個將在網站上運行，第一個圖像下拉腳本運行第二個滾動功能

 //show dropdowns// function myFunction(a) { a.parentNode.getElementsByClassName('dropdown-content')[0].classList.toggle("show"); } //click anywhere to hide dropdown// window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }; window.onscroll = function () { myFunction(); }; function myFunction() { if (document.documentElement.scrollTop > 50) { document.getElementById("tph").className = "scrolled"; } else { document.getElementById("tph").className = "header_top"; } }

Answer 1

嘗試更改其中一個函數的名稱以防止覆蓋。

JavaScript 支持覆蓋而不是重載，也就是說，如果你定義了兩個同名的函數，最后一個定義的函數將覆蓋之前定義的版本，並且每次調用該函數時，都會執行最后一個定義的函數。

 function myFunction(a) { a.parentNode.getElementsByClassName('dropdown-content')[0].classList.toggle("show"); } //click anywhere to hide dropdown// window.onclick = function(event) { if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } } }; window.onscroll = function() { myFunction2(); }; function myFunction2() { if (document.documentElement.scrollTop > 50) { document.getElementById("tph").className = "scrolled"; } else { document.getElementById("tph").className = "header_top"; } }