JS轮播图图片无法切换问题求助（ID及路径均确认无误）

核心问题：变量名拼写错误 #

你所有切换图片的代码中，都错误地使用了未定义的id变量来访问图片数组，而实际的索引变量是ind。id未声明，导致images[id]返回undefined，图片路径无效，所以无法切换。

其他次要问题 #

• 全局变量未声明：ind = 0没有用let/var声明，易引发意外问题
• 样式缺少单位：图片的height/width没有px单位，浏览器无法正确解析尺寸
• 代码冗余：定义了next()/previous()函数但未调用，按钮内重复写逻辑

修复后的完整代码 #

<!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>Document</title>
</head>
<body>
    <script>
        var images = ['./image1.png', './image2.png', './image3.png'];
        let ind = 0; // 用let声明变量，避免全局污染
        function next() {
            if(ind < images.length - 1) {
                ind++;
                document.getElementById("myimg").src = images[ind]; // 修正为ind
            }
        }

        function previous() {
            if(ind > 0) {
                ind--;
                document.getElementById("myimg").src = images[ind]; // 修正为ind
            }
        }
    </script>
    <img src="screenshot .png" id="myimg" style="height: 300px; width: 300px;"/> <!-- 添加px单位 -->
    <form>
        <input type="button" value="previous" onclick="previous()"/> <!-- 调用函数，简化代码 -->
        <input type="button" value="next" onclick="next()"/> <!-- 调用函数，简化代码 -->
    </form>
</body>
</html>

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