How can you change an image on a bootstrap carousel on click?

Question

I currently have a bootstrap carousel with 3 images each image has a caption I want it so when you click on the caption on the first carousel image the image will change to a gif but it isn't working using basic JavaScript.

I want plymouthImg to change into permitionImg, currently permitionImg display is set to none!important

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img id="plymouthImg" src="imgs/plymouth1.jpg" class="d-block w-100" alt="Roland Levinsky Building">
          <img id="permitionImg" src="imgs/plymouthbaw.gif" class="d-block w-100" alt="Permition">
          <div class="carousel-caption d-md-block">
            <h3 onclick="changeText()" class="plymouth">Welcome to the University of Plymouth</h3>
            <h3 class="permition">Welcome to Permition</h3>
          </div>
        </div>

This is the JavaScript function on the h3

function changeText() {
    const plymouthText = document.querySelector('.plymouth');
    const permitionText = document.querySelector('.permition');
    const plymouthImg = document.getElementById('plymouthImg');
    const permitionImg = document.getElementById('permitionImg');

    plymouthText.style.display = "none";
    permitionText.style.display = "block";
    plymouthImg.style.display = "none!important";
    permitionImg.style.display = "block!important";

}

Answer 1

Figured it out myself so gonna leave my solution here in case anyone else has this problem. By wrapping the images in their own individual div and applying the display changes to the divs instead of the images it bypasses any styling that is overriding the JavaScript I wrote HTML

<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
      <div class="carousel-inner">
        <div class="carousel-item active">
          <div id="plymouthImg">
            <img src="imgs/plymouth1.jpg" class="d-block w-100" alt="Roland Levinsky Building">
          </div>
          <div id="permitionImg">
            <img src="imgs/plymouthbaw.gif" class="d-block w-100" alt="Permition">
          </div>
          <div class="carousel-caption d-md-block">
            <h3 onclick="changeText()" class="plymouth">Welcome to the University of Plymouth</h3>
            <h3 class="permition">Welcome to Permition</h3>
          </div>

JavaScript

function changeText() {
    const plymouthText = document.querySelector('.plymouth');
    const permitionText = document.querySelector('.permition');
    const plymouthImg = document.getElementById('plymouthImg');
    const permitionImg = document.getElementById('permitionImg');

    plymouthText.style.display = "none";
    permitionText.style.display = "block";
    plymouthImg.style.display = "none";
    permitionImg.style.display = "block";
}