外部JavaScript文件无法运行、代码未加载问题求助

我是JavaScript ES6新手，首次尝试连接外部script.js文件，已将script标签放置在body闭合标签前，但使用live server测试时看不到任何修改效果，推测外部JS文件未正确连接，代码完全未被识别，恳请告知修复方法。

index.html 代码 #

<!DOCTYPE html>
<html lang="en">
    <head> 
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Restaurant menu</title>
<link rel="stylesheet" href="style.css">
    </head>
    <body>
<div class="menuContainer">
    <div class="menuBox">
    <h1 id="item">Food Item1
    </h1>
    <p id="oneLiner">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis, ab.
    </p>
         <img src="https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img">

         <h2 id="hotel">Hotel name1

         </h2>
         <p id="desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?

         </p>
        
         <div class="btn">
            <button id="prev"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTtb_on3v-MaK_PJ7IQW4odw2kfxHc9Tw_GkQ&usqp=CAU> </button>
            <button id="random">Random Menu</button>
             <button id="next">:arrrow </button>
        </div>
    </div>
</div>

        <script src="script.js"></script>
    </body>

</html>

script.js 代码 #

const menuItems=[
    {
        id:1,
        item:"Food Item1",
        oneliner:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis, ab.",
         img:"https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353" alt="img" id="img",
         hotel:"Hotel name1",
         desc:"One:Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?",

    },
    {
        id:2,
        item:"Food Item2",
        oneliner:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis, ab.",
         img:"https://img.freepik.com/free-photo/delicious-food-white-plate_144627-34705.jpg?w=996&t=st=1658479142~exp=1658479742~hmac=01dc2417f561f6c0f085dd950329cc540c80708a855036bb20742a6a07045854",
         hotel:"Hotel name2",
         desc:"Two:Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?",

    },
    {
        id:3,
        item:"Food Item3",
        oneliner:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis, ab.",
         img:"https://img.freepik.com/free-photo/flat-lay-salad-with-chicken-sesame-seeds_23-2148700369.jpg?t=st=1658479233~exp=1658479833~hmac=923cf6d606b47745be064daefd12de3c39795a3cd294267bb1eeb76f4fd1bc06&w=996",
         hotel:"Hotel name3",
         desc:"Three:Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?",

    },
    {
        id:4,
        item:"Food Item4",
        oneliner:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis, ab.",
         img:"https://img.freepik.com/free-photo/top-view-delicious-autumn-soup-composition_23-2148634470.jpg?t=st=1658479312~exp=1658479912~hmac=d46be965f48809c72046fca1aba514a39f16e26d4512c8c52c50b40d7d050b4a&w=996",
         hotel:"Hotel name4",
         desc:"Four:Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?",

    },
    {
        id:5,
        item:"Food Item5",
        oneliner:"Lorem ipsum, dolor sit amet consectetur adipisicing elit. Perspiciatis, ab.",
         img:"https://img.freepik.com/free-photo/concept-tasty-food-with-beef-with-vegetables-close-up_185193-75830.jpg?t=st=1658479413~exp=1658480013~hmac=62bbb71751e0b62e1aab4542bc09efefa4cde3eca56680c250164c6047304ed0&w=996",
         hotel:"Hotel name5",
         desc:"Five:Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid deserunt pariatur dolorem quo necessitatibus quas voluptatibus eaque placeat soluta voluptatem?",

    },
]

const item=document.getElementById('item');
const oneLiner=document.getElementById('oneLiner');
const img=document.getElementById('img');
const hotel=document.getElementById('hotel');
const desc=document.getElementById('desc');
const prev=document.getElementById('prev');
const random=document.getElementById('random');
const next=document.getElementById('next');

let currentMenu=1;

window.addEventListener('DOMContentLoaded',function(){
    let menu=menuItems[currentMenu];
    item.textContent=menu.item;
    oneLiner.textContent=menu.oneLiner;
    img.src=menu.img;
    hotel.textContent=menu.hotel;
    desc.textContent=menu.desc;

});

1. 修正script.js中的语法错误 #

第一个对象的img属性写法错误，混入了HTML的alt和id属性，导致JS解析失败，文件无法正常执行。修改为：

img:"https://img.freepik.com/free-photo/delicious-fried-chicken-plate_144627-27383.jpg?size=626&ext=jpg&ga=GA1.2.404766179.1658308353",

2. 检查文件路径与结构 #

• 确保script.js和index.html在同一目录下；若不在同一目录，需修正<script src="script.js"></script>中的路径，比如子目录写src="js/script.js"，上级目录写src="../script.js"。
• 确认文件名拼写正确，注意部分系统区分文件名大小写。

3. 验证JS文件是否加载 #

打开浏览器开发者工具（F12）：

• 切换到**控制台(Console)**标签，查看是否有语法错误提示；
• 切换到**网络(Network)**标签，刷新页面，查看script.js是否成功加载（状态码应为200）。

4. 修正数组索引问题 #

当前currentMenu=1，对应menuItems[1]是第二个对象（JS数组索引从0开始），如果想默认显示第一个菜单，需改为let currentMenu=0;。

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