multiple javascript files are not working in a sinlge page

Question

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 class="dropdown">
    <button onclick="myFunction()" class="dropbtn">MENU</button>
    <div id="myDropdown" class="dropdown-content">
      <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.

Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. The same applies to things like `window.onclick`. — Sebastian Simon, Dec 02 '22 at 12:55
You have two functions with the same name. When you call one of them, how do you expect the browser to know which one you meant? Give different names to different things. — David, Dec 02 '22 at 12:56

score 1 · Answer 1 · answered Dec 02 '22 at 19:04

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.

score 0 · Answer 2 · answered Dec 02 '22 at 19:31

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 class="dropdown">
        <button id="dropbtnId" class="dropbtn">MENU</button>
        <div id="myDropdown" class="dropdown-content">
          <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

multiple javascript files are not working in a sinlge page

2 Answers2