HTML中点击按钮随机切换图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <input type="button" value="切换" id="btn">
    <br>
    <img src="images/1.jpg" width="300" id="img">
   
    <script>
        
    </script>
</body>

</html>

```这个是代码片段具体该怎样实现呀

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/442432917486144.jpg "#left")

喏


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="切换" id="btn">
    <br>
    <img src="images/1.jpg" width="300" id="img">
   
    <script>
        const imgArr = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg']; // 图片地址数组

        const btn = document.getElementById('btn');
        const img = document.getElementById('img');

        btn.addEventListener('click', () => {
            const randomIndex = Math.floor(Math.random() * imgArr.length); // 随机数
            const randomSrc = imgArr[randomIndex]; // 随机图片地址
            img.src = randomSrc; // 修改图片地址
        });
    </script>
</body>
</html>

给你的button加一个点击事件，每次点击更换img的src值

该回答引用chatgpt:
点击按钮时会触发 changeImage 函数。该函数会从定义的图片数组中随机选取一张图片，并将选中的图片路径更新到标签的 src 属性上，从而实现图片的切换效果。

<button onclick="changeImage()">切换图片</button>
<img id="image" src="default.jpg" alt="图片">

function changeImage() {
  var images = ["image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg"]; // 定义图片数组，包含要切换的图片路径
  var randomIndex = Math.floor(Math.random() * images.length); // 生成一个随机索引
  var imgElement = document.getElementById("image"); // 获取图片元素
  imgElement.src = images[randomIndex]; // 更新图片的 src 属性为随机选取的图片路径
}

写个数组，数组里是图片的url ,然后用随机数函数，随机下标就行，重新赋值给 src属性

<!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>
    <style>
        img {
            width: 400px;
            height: 200px;
        }
    </style>
</head>

<body>
    <img src="" alt="" id="img">
    <button id="changeBtn">切换</button>
</body>
<script>
    let changeBtn = document.getElementById("changeBtn");
    let imgSrc = ["https://img2.baidu.com/it/u=2661217879,176998036&fm=253&fmt=auto?w=800&h=1144", "https://img1.baidu.com/it/u=734377687,1875015030&fm=253&fmt=auto?w=800&h=1067", "https://img1.baidu.com/it/u=3904919508,4157769901&fm=253&fmt=auto?w=800&h=1067"];
    changeBtn.addEventListener("click",()=>{
        changeImg(imgSrc)
    });
    changeImg(imgSrc);
    function changeImg(imgData, i) {
        if (!imgData) {
            return
        }
        let img = document.getElementById("img");
        let len = imgData.length;
        if (len >= 0&& i) {
            img.src = imgData[Number(i)];
            return
        }
        let xb=Math.floor((Math.random() * len-1) + 1);
        img.src =imgData[xb];


    }
</script>

</html>

去了解两个东西
addEventListener
Math