Estoy tratando de desarrollar un sitio web de comercio electrónico por primera vez, pero aquí escribí dos guiones.
Como puede ver en las imágenes, funciona bien, pero solo el que se colocó en segundo lugar funcionará en el sitio web, en la primera imagen, el script desplegable funciona, en el segundo, funciona la función de desplazamiento.
//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"; } }Intente cambiar el nombre de una de sus funciones para evitar sobrescribir.
JavaScript admite anular, no sobrecargar, lo que significa que si define dos funciones con el mismo nombre, la última definida anulará la versión definida anteriormente y cada vez que se realice una llamada a la función, se ejecutará la última definida.
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"; } }