JavaScript新手求助：点击Next按钮无法替换HTML页面图片

你的代码核心问题是：获取页面上的image5元素后，又用new Image()创建了一个新的图片对象，覆盖了原本指向页面DOM元素的引用——相当于你只是在内存里新建了一张图，根本没修改页面上已经存在的<img>标签的src属性。

修正后的代码（循环切换版本） #

<body>
    <script>
        var arr = ["apple.jpg","kiwi.jpg", "pineapple.jpg","mango.jpg"];
        // 记录当前显示的图片索引，避免破坏原数组
        let currentIndex = 0;

        function a() {
            // 获取页面上的img元素
            const imageElement = document.getElementById("image5");
            // 索引递增，超过数组长度时回到开头，实现循环切换
            currentIndex = (currentIndex + 1) % arr.length;
            // 直接修改页面元素的src属性，这才是更新页面图片的关键
            imageElement.src = arr[currentIndex];
        }
    </script>
    <img src="apple.jpg" id="image5" style="width:300px;height:300px;">
    <button onClick="a();">Next</button>
</body>

关键修改点说明 #

• 删掉了new Image()的无用代码：你不需要新建图片对象，直接操作页面上已存在的<img>元素的src属性，就能替换显示的图片。
• 用currentIndex跟踪图片位置：避免每次删除数组元素（原代码的splice(0,1)会让数组越变越短，最后点击按钮会报错），通过取余运算实现循环切换。
• 使用const声明变量：符合现代JS规范，避免全局变量污染。

如果你想保留“用完即删”的逻辑（不循环） #

可以这样改，同时增加数组为空时的容错处理：

<body>
    <script>
        var arr = ["apple.jpg","kiwi.jpg", "pineapple.jpg","mango.jpg"];

        function a() {
            const imageElement = document.getElementById("image5");
            // 数组为空时直接返回，防止报错
            if (arr.length === 0) return;
            // 直接修改页面img的src
            imageElement.src = arr[0];
            // 删除数组第一个元素
            arr.splice(0,1);
            // 数组空了就禁用按钮
            if (arr.length === 0) {
                document.querySelector("button").disabled = true;
            }
        }
    </script>
    <img src="apple.jpg" id="image5" style="width:300px;height:300px;">
    <button onClick="a();">Next</button>
</body>

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