同一页面引入多个JavaScript文件仅最后一个生效问题求助

在index.html中引入了两个JS文件（menu.js实现菜单下拉，readmore.js实现“查看更多”），但同时引入时只有最后一个文件的功能生效，第一个文件的下拉菜单无法工作。

相关代码如下：

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";
    }
}

两个JS文件都定义了同名的全局函数myFunction，浏览器加载脚本时按顺序执行，后加载的readmore.js中的myFunction会覆盖menu.js里的同名函数，导致点击菜单按钮时调用的是“查看更多”的函数，下拉功能失效。

方案1：重命名函数（最简单直接） #

• 修改menu.js中的函数名，比如改为toggleDropdown：

function toggleDropdown() {
    document.getElementById("myDropdown").classList.toggle("show");
}

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');
            }
        }
    }
}

• 同时修改index.html中按钮的onclick事件：

<button onclick="toggleDropdown()" class="dropbtn">MENU</button>

方案2：使用事件监听替代内联onclick（更规范） #

这种方式避免全局函数冲突，也更符合现代JS开发规范：

• 修改menu.js，去掉全局函数，改用事件监听：

// 给菜单按钮绑定点击事件
document.querySelector('.dropbtn').addEventListener('click', function() {
    document.getElementById("myDropdown").classList.toggle("show");
});

// 点击外部关闭下拉菜单
window.addEventListener('click', 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');
            }
        }
    }
});

• 同时删除index.html中按钮的onclick属性：

<button class="dropbtn">MENU</button>

• readmore.js也可以用同样的方式改造，避免全局函数：

document.getElementById('myBtn').addEventListener('click', function() {
    var dots = document.getElementById("dots");
    var moreText = document.getElementById("more");
    var btnText = this; // 直接用当前按钮元素

    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";
    }
});

内容的提问来源于stack exchange，提问作者user20519479