multiple javascript files are not working in a sinlge page-CodePudding

As you can see in my index.html page, I am adding two javascript file in a single page, one is for menu drop down and another is for readmore option.i'm new to javascript please help.when i add both last one file is work only first file cannot work .


"index.html"

<!DOCTYPE html>
<html>
    <head>
        <title>united</title>
        
       <link rel="stylesheet" href="/static/css/dps.css"/>
    </head>
    <body>
        
   
  <div >
    <button onclick="myFunction()" >MENU</button>
    <div id="myDropdown" >
      <a href='..'>Home</a>
      <a href="aboutus">About</a>
      <a href="#contact">Contact</a>
      <a href="Question-bank">Question Bank</a>
      <a href="updated-calender">calender</a>
      <a href="calculator">calculator</a>
    </div>
  </div><br>

  <script src="/static/js/menu.js"></script>
  <script src="/static/js/readmore.js" ></script>

</Body>
</html>

"menu.js"

       /* When the user clicks on the button, 
                toggle between hiding and showing the dropdown content */
                function myFunction() {
                    document.getElementById("myDropdown").classList.toggle("show");
                  }
                  
                  // Close the dropdown if the user clicks outside of it
                  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');
                        }
                      }
                    }
                  }

"readmore.js"


   function myFunction() {
     var dots = document.getElementById("dots");
     var moreText = document.getElementById("more");
     var btnText = document.getElementById("myBtn");
  
    if (dots.style.display === "none") {
      dots.style.display = "inline";
      btnText.innerHTML = "Read more"; 
      moreText.style.display = "none";
     } 
     else {
      dots.style.display = "none";
      btnText.innerHTML = "Read less"; 
      moreText.style.display = "inline";
    }
  }

please solve my problem why two js files cannot work in a single page.

CodePudding user response：

Welcome to Stack Overflow!

Both your scripts define a function with the same name: myFunction. If you define 2 functions with the same name, then the second function will shadow the first one, meaning that the first one is inaccessible. When calling myFunction you will always call the second function.

If you make sure that the functions have different names, then it should work.

CodePudding user response：

be carefull about the "onClick" EventListener, the good way to do that is to add an EventListener to the element.

For exemple for your button

const element = document.getElementById('dropbtnId');
element.addEventListener("click", function() {
  myFunction();
});

Here is an example with your code :

const element = document.getElementById('dropbtnId');
element.addEventListener("click", function() {
  alert("triggered");
});

    <html>
        <head>
            <title>united</title>
            
           <link rel="stylesheet" href="/static/css/dps.css"/>
        </head>
        <body>
            
       
      <div >
        <button id="dropbtnId" >MENU</button>
        <div id="myDropdown" >
          <a href='..'>Home</a>
          <a href="aboutus">About</a>
          <a href="#contact">Contact</a>
          <a href="Question-bank">Question Bank</a>
          <a href="updated-calender">calender</a>
          <a href="calculator">calculator</a>
        </div>
      </div><br>

Next step is to rename your functions, and then call it inside the EventListener