Bootstrap轮播图随机引用生成器仅首图显示问题求助

开发带随机引用生成器覆盖层的Bootstrap Carousel时，遇到以下问题：随机引用仅在第一张轮播图正常显示，切换到第二、第三张图时引用消失，切回第一张又能显示新引用。

核心问题：重复使用唯一ID #

HTML规范要求ID必须是页面全局唯一的，你的代码存在两个关键错误：

• 每个轮播项的引用容器都用了相同的id="quotes"和id="author"，document.getElementById()只会返回页面中第一个匹配的元素，导致切换轮播时，JS始终在修改第一张的引用容器，当前显示的轮播项里的容器根本没被更新。
• 前两张轮播图的img重复使用id="generate"，违反规范，虽不是引用消失的直接原因，但会引发其他潜在问题。

解决方案 #

1. 修改HTML：用类代替重复ID #

把所有重复的ID替换为类，保持结构一致性：

<!-- The Start of the main Carousel-->

<div class="container-lg my-3">
<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
    <!-- Carousel indicators -->
    <ol class="carousel-indicators">
        <li data-bs-target="#myCarousel" data-bs-slide-to="0" class="active"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="1"></li>
        <li data-bs-target="#myCarousel" data-bs-slide-to="2"></li>
    </ol>
    
    <!-- Wrapper for carousel items -->
    <div class="carousel-inner">
        
        <div class="carousel-item active">
            <div class="mybox">
                <img class="generate-img" src="images/mockup1.jpg" class="d-block w-100" alt="Slide 1">
                <div class="text">
                    <p class="quotes"></p>
                    <p class="author"></p>
                </div>
            </div>
        </div>

        <div class="carousel-item">
            <div class="mybox">
                <img class="generate-img" src="images/mockup2.jpg" class="d-block w-100" alt="Slide 2">
                <div class="text">
                    <p class="quotes"></p>
                    <p class="author"></p>
                </div>
            </div>
        </div>
        
        <div class="carousel-item">
            <div class="mybox">
                <img class="generate-img" src="images/mockup3.jpg" class="d-block w-100" alt="Slide 3">
                <div class="text">
                    <p class="quotes"></p>
                    <p class="author"></p>
                </div>
            </div>
        </div>
    </div>

    <!-- Carousel controls -->
    <a class="carousel-control-prev" href="#myCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#myCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
 </div>
 </div>

2. 修改JavaScript：定位当前激活轮播项并更新引用 #

在轮播切换时，找到当前激活的轮播项，针对性更新其内部的引用容器：

//Begin the Random Quote function of 'generateQuote'
document.addEventListener("DOMContentLoaded", function(){
    var myCarousel = document.getElementById("myCarousel");

    // 页面加载时初始化首张轮播的引用
    generateQuote();

    myCarousel.addEventListener("slide.bs.carousel", function(){
        generateQuote();
    });
});

const generateQuote = function() {
    const quotes = [
        {
            quote: "Do not pity the dead, Harry. Pity the living, and, above all those who live without love.",
            author: "Albus Dumbledore"
        },
        {
            quote: "It is impossible to manufacture or imitate love",
            author: "Horace Slughorn"
        },
        {
            quote: "Being different isn't a bad thing. It means that you are brave enough to be yourself.",
            author: "Luna Lovegood"
        },
        {
            quote: "If you want to know what a man’s like, take a good look at how he treats his inferiors, not his equals.",
            author: "Sirius Black"
        },
        {
            quote: "Never trust anything that can think for itself if you can’t see where it keeps its brain.",
            author: "Arthur Weasley"
        },
        {
            quote: "Every human life is worth the same, and worth saving.",
            author: "Kingsley Shacklebolt"
        },
        {
            quote: "Have a biscuit, Potter.",
            author: "Minerva McGonagall"
        },
        {
            quote: "Happiness can be found even in the darkest of times, if one only remembers to turn on the light.",
            author: "Albus Dumbledore"
        },
        {
            quote: "Socks are Dobby’s favorite, favorite clothes, sir!",
            author: "Dobby"
        }
    ];

    let arrayIndex = Math.floor(Math.random() * quotes.length);
    // 定位当前激活的轮播项
    const activeItem = document.querySelector('.carousel-item.active');
    // 更新当前轮播项的引用内容
    activeItem.querySelector('.quotes').innerHTML = quotes[arrayIndex].quote;
    activeItem.querySelector('.author').innerHTML = quotes[arrayIndex].author;
}

额外修正 #

移除了原JS中document.getElementById("generate").innerHTML = 'myCarousel';这行错误代码，它会将第一张轮播图替换为文本，完全不符合需求。

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