Javascript Функция не позволяет ссылкам меню работать

Question

Здравствуйте, ссылки в моем меню не подключаются к другим веб-страницам. Я уверен, что одна из моих javascript функций не работает с этими ссылками меню, но я не уверен, как выяснить, как это исправить.

Я добавил функцию, которая создает подчеркивание меню под каждым меню. Так что, если бы мне пришлось угадать, это, вероятно, является причиной проблемы. Вы можете увидеть сайт в режиме реального времени, нажав на ссылку ниже.

http://lonestarwebandgraphics.com/

// ============= MENU HOVER UNDERLINE EFFECT - START =================

//  Menu Underline Function - START

(function() {

  const target = document.querySelector(".target");
  const links = document.querySelectorAll(".mynav a");
  const colors = ["#f7c51e"];
  // const colors = ["deepskyblue", "orange", "firebrick", "gold", "magenta", "black", "darkblue"];

  function mouseenterFunc() {
    if (!this.parentNode.classList.contains("active")) {
      for (let i = 0; i < links.length; i++) {
        if (links[i].parentNode.classList.contains("active")) {
          links[i].parentNode.classList.remove("active");
        }
        // links[i].style.opacity = "0.25";
      }

      this.parentNode.classList.add("active");
      this.style.opacity = "1";

      const width = this.getBoundingClientRect().width;
      const height = this.getBoundingClientRect().height;
      const left = this.getBoundingClientRect().left + window.pageXOffset;
      const top = this.getBoundingClientRect().top + window.pageYOffset;
      const color = colors[Math.floor(Math.random() * colors.length)];

      target.style.width = `${width}px`;
      target.style.height = `${height}px`;
      target.style.left = `${left}px`;
      target.style.top = `${top}px`;
      target.style.borderColor = color;
      target.style.transform = "none";
    }
  }

  for (let i = 0; i < links.length; i++) {
    links[i].addEventListener("click", (e) => e.preventDefault());
    links[i].addEventListener("mouseenter", mouseenterFunc);
  }

  function resizeFunc() {
    const active = document.querySelector(" .mynav li.active");

    if (active) {
      const left = active.getBoundingClientRect().left + window.pageXOffset;
      const top = active.getBoundingClientRect().top + window.pageYOffset;

      target.style.left = `${left}px`;
      target.style.top = `${top}px`;
    }
  }

  window.addEventListener("resize", resizeFunc);


// Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - START

document.querySelector(".mynav").addEventListener("mouseleave", function() {
  target.removeAttribute("style");
})
  
// Event Listener To Remove Line From Floating in Air When Leaving Dropdown Box - END

})();

// ============= MENU HOVER UNDERLINE EFFECT - END =================


// ============= Add "Responsive" Class  When Click On "Menu Click Here" Hamburger - Menu Dropdown =================


function myFunction() {
  var x = document.getElementById("mybottomnav");
  if(x.classList.contains("responsive")) {
    x.classList.remove("responsive");
  } else {
    x.classList.add("responsive");
  }
}


// // This code has an error - It removes the sticky in mobile view
// function myFunction() {
//     var x = document.getElementById("mybottomnav");
//     if (x.className === "bottomnav") {
//       x.className += " responsive";
//     } else {
//       x.className = "bottomnav";
//     }
//   }




// ============= WHITE NAVBAR STICKY =================


// When the user scrolls the page, execute myFunction
window.onscroll = function() {stickyFunction()};

// Get the navbar
var navbar = document.getElementById("mybottomnav");

// Get the offset position of the navbar
var sticky = mybottomnav.offsetTop;

// Add the sticky class to the navbar when you reach its scroll position. Remove "sticky" when you leave the scroll position
function stickyFunction() {
  if (window.pageYOffset >= sticky) {
    mybottomnav.classList.add("sticky")
  } else {
    mybottomnav.classList.remove("sticky");
  }
}


// Fixed White Navbar Sticky Dropdown To Work on Mobile.


// function fixed_top_menu() {
//   var windows = $(window);
//   windows.on("scroll", function () {
//       var header_height = $(".bottomnav").height();
//       var scrollTop = windows.scrollTop();
//       if (scrollTop > header_height) {
//           $(".bottomnav").addClass("sticky");
//       } else {
//           $(".bottomnav").removeClass("sticky");
//       }
//   });
// }
// fixed_top_menu();

@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900&display=swap');


/* 
YELLOW - #f7c51e
GREY - #363636
background white - #f6f6f6

*/



* {
    box-sizing: border-box;
    margin: 0; 
    padding: 0;
}


.color-overlay-container {
    justify-content: center;
    align-items: center;
    position: relative;
}

.color-overlay {
    width: 100%;
    height: 100%;
    background: #000;
    opacity: .5;
    z-index: 2;
    position: absolute;
}


.btn-black{
    padding: 1.5rem 2rem;
    color: white;
    background: black;
    text-transform: uppercase;
    font-weight: 900;
}

.btn-yellow{
    padding: 1.5rem 2rem;
    color:  white;
    background: #f7c51e;
    text-transform: uppercase;
    font-weight: 900;
}


body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
}

a {
    text-decoration: none;
}


p {
    margin: .5rem 0;
}

/* Utility Classes */

/* Grid Container */


.grid-container {
display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  margin: auto;
  grid-auto-rows: minmax(200px, auto);
}

.grid-container-2 {
    display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1rem;
  margin: auto;
}

.card {
    background: #fff;
    padding: 1rem;
}


/* Grid Container - END */


.container {
    max-width: 1404px;
    margin: auto;
    padding: 0 2rem;
    overflow: hidden;
}


.text-center {
    text-align: center;
}


.text-yellow {
    color: #f7c51e;
}

.bg-yellow {
    background: #f7c51e;
    color: black;
}

.bg-grey {
    background: #f9f9f9;
    color: black;
}

.bg-black {
    background:black;
    color: white;
}


.l-heading {
    font-weight: bold;
    font-size: 4rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.m-heading {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1.1;
}

.lead {
    font-size: 1.3rem;
    margin: 0.75rem 0;
}



/* Padding */

.py-1 {
    padding: 1.5rem 0;
}

.py-2 {
    padding: 2rem 0;
}

.py-3 {
    padding: 3rem 0;
}


/* All Around Padding */

.p-1 {
    padding: 1.5rem;
}

.p-2 {
    padding: 2rem;
}

.p-3 {
    padding: 3rem;
}


/* Utility Classes - END */



/* ================  HOME PAGE ==================== */


/* HEADER */



.site-header {
    background-color: transparent;
}

.site-header .header-container {
    background: black;
    color: white;
}

/* BLACK BAR */

.site-header .header-container .header-container_wrap {
    padding: 30px 5px;
    /* background: red; */
}

#masthead .header-container .header-container_wrap .items {
    display: flex;
    justify-content: center;
}

#masthead .header-container .header-container_wrap .items .contact-info {
    display: flex;

}

#masthead .header-container .header-container_wrap .items .quality-logo {
    margin-right: 3rem;
    line-height: 5px;
}

#masthead .header-container .header-container_wrap .items .quality-logo p {
    font-size: 14px;
    line-height: 1.5;
}


#masthead .header-container .header-container_wrap .items .item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}


#masthead .header-container .header-container_wrap .items .item {
    display: flex;
    align-items: center;
    margin-right: 1rem;
}
/* 
#masthead .header-container .header-container_wrap .items .item .facebook-like {
    text-align: center;
    color: white;
    background-color: black;
} */

#masthead .header-container .header-container_wrap .items .item .facebook-like {
    text-align: center;
    background-color: black; /* Blue background */
  border: none; /* Remove borders */
  color: white; /* White text */
  padding: none; /* Some padding */
  font-size: 16px; /* Set a font size */
  cursor: pointer; /* Mouse pointer on hover */
}

#masthead .header-container .header-container_wrap .items .item .facebook-like:hover {
   
/* Darker background on mouse-over */

    color: #f7c51e;
  
}



#masthead .header-container .header-container_wrap .items .item .fas  {
    font-size: 18px;
    color: #f7c51e;
    margin-right: 1.5rem;
}


#masthead .header-container .header-container_wrap .items .contact-info .item .fas  {
    font-size: 18px;
    color: #f7c51e;
    margin-right: 1.5rem;
    background: black;
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #363636;
}

/* ========================== Bottom White Header Menu  - START ================ */


/* Menu Underline */


.mynav a {
    display: block;
    font-size: 20px;
    color: black;
    text-decoration: none;
    padding: 7px 15px;
  }
  
  .target {
    position: absolute;
    border-bottom: 4px solid transparent;
    z-index: 100;
    transform: translateX(-60px);
    pointer-events: none;
  }
  
  .mynav a,
  .target {
    transition: all .35s ease-in-out;
  }



  /* ================================ STICKY ========================*/


/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
    position: fixed;
    top: 0;
    width: 100%;

  }

  .bottomnav.sticky {
      padding: 0rem;
  }

  .bottomnav.sticky .items .item {
      margin: auto;
  }

  .bottomnav.sticky .items .item:nth-child(2)  {
      display: none;
  }


/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
/* .sticky + .swiper-container {
    padding-top: 60px;
  }
 */


.bottomnav {
    background-color: white;
    overflow: hidden;
    padding: 1rem;
    z-index: 1200;
  }


  #mybottomnav .items {
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  

  #mybottomnav .items .item .mynav ul{
      display: flex;
      align-items: center;
  }
  

  #mybottomnav .items .item .mynav ul li{
      display: flex;
      align-items: center;
  }
  

  #mybottomnav .items .item .mynav ul li:nth-child(4){
      margin-left: .5rem;
      /* background-color: red; */
  }
  
  /* Style the links inside the navigation bar */
  .bottomnav a {
    /* float: left;
    display: block; */
    color: rgb(94,94,94);
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
    font-weight: 600;
  }
  
  /* Add an active class to highlight the current page */

/*     
    .active {
     color: black;
    font-weight: 600; 
    color: #363636;
   }  */
  

  /* Hide the link that should open and close the bottomnav on small screens */
  .bottomnav .icon {
    display: none;
  }
  

  /* ============================ DROP DOWN MENU =============================== */
  /* Dropdown container - needed to position the dropdown content */
  .dropdown {
    /* float: left; */
    overflow: hidden;
  }
  
  /* Style the dropdown button to fit inside the bottomnav */
  .dropdown .dropbtn {
    font-size: 17px;
    border: none;
    outline: none;
    /* color: rgb(94,94,94); */
    padding: 14px 16px;
    background-color: inherit;
    font-family: inherit;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    display: flex;
    align-items: center;
  }
  
  /* Style the dropdown content (hidden by default) */
  .dropdown-content {
    display: none;
    position: fixed;
    background-color: #f7c51e;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    color: rgb(94,94,94);
  }
  
  /* Style the links inside the dropdown */
.mynav   .dropdown-content a {
    font-size: 14px;
    font-weight: 500;
    float: none;
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    text-transform: uppercase;
  }
  
  /* Add a dark background on bottomnav links and the dropdown button on hover */
  .bottomnav a:hover, .dropdown:hover .dropbtn {
    /* background-color: red; */
    color: black;
    

  }
  
  /* Add a grey background to dropdown links on hover */
  .dropdown-content a:hover {
    /* background-color: red; */
    color: black;
    
  }

  
  /* Show the dropdown menu when the user moves the mouse over the dropdown button */
  .dropdown:hover .dropdown-content {
    display: block;
    z-index: 101;
  }
  
  
  /* SEARCH ICONS */

  #mybottomnav .items .item .fa-search{
      font-size: 1.25rem;
      color: #363636;
  }




/* ========================== Bottom White Header Menu - END ================ */

Answer 1

Проблема была устранена путем удаления - links [i] .addEventListener ("click", (e) => e.preventDefault ()); в javascript.