Looking to swap out an image on a bootstrap carousel with a click event?

I have a bootstrap carousel featuring 3 images, each with a caption. My goal is to make it so that when you click on the caption of the first carousel image, the image will change to a gif. I've attempted to achieve this using basic JavaScript, but so far it's not working.

Specifically, I want the 'plymouthImg' to transition into 'permitionImg'. Currently, the display for 'permitionImg' 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";

}
javascripthtmlcssbootstrap-4bootstrap-carousel

Answer №1

Figured out the solution independently and decided to share it here for anyone facing a similar issue. By wrapping each image in its own div and applying display changes to the divs instead of the images themselves, I was able to bypass any styling conflicts with the JavaScript code I implemented. 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";
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Switch up the font style of the title element

Is it possible to modify the font-family of the title attribute in an input field using either JavaScript or jQuery? <input type="text" title="Enter Your Name" id="txtName" /> ...

javascriptjqueryhtmlcss

Is the camera.lookAt() method still available in the THREE.js library?

While searching for information on setting up the camera, I came across references to the lookAt function in various posts. However, when I checked the THREE.js documentation, I couldn't locate this method. Can anyone help me understand where it went ...

javascriptthree.js

How can I ensure the header and footer of a Modal stay in place while still allowing the content within the Modal to scroll?

Recently, I have been experimenting with the Modal component and have noticed that when there is long content in the Modal window, the entire modal body begins to scroll. Is there a way to make only the content scroll while keeping the header and footer ...

javascriptreactjsantd

Issues with Mocha's beforeEach() and done() functions not functioning as expected

I am facing an issue with my Mocha test suite. When I run the 'make test' command, I encounter the following error message: Uncaught TypeError: Object [object Object],[object Object] has no method 'done' Below is the relevant code sni ...

javascriptnode.jsexpressmocha.js

Defining the range of an array of numbers in TypeScript: A complete guide

When working with Next.js, I created a function component where I utilized the useState hook to declare a variable for storing an array of digits. Here is an example: const [digits, setDigits] = useState<number[]>(); I desire to define the range of ...

javascripttypescriptnext.js

Encountered an error while using vue-tiny-slider: Uncaught TypeError in promise - t2 is not recognized as a function

I'm currently using Vue 3 and have installed the vue-tiny-slider library from https://github.com/viktorlarsson/vue-tiny-slider. However, I encountered an error stating 't2 is not a function'. Since the documentation doesn't provide inst ...

javascriptvue.jsslidercarousel

Foundation 6: Alignment issues with Top Bar

Exploring Foundation 6 and trying out the sample code. I'm puzzled as to why the "Site Title" is not in alignment with the rest of the top-bar, it seems to be slightly higher up. <div class="top-bar"> <div class="top-bar-title"> ...

csshtmlzurb-foundationzurb-foundation-6

When it comes to utilizing jQuery for the mobile view, how many jQuery libraries are recommended for optimal performance?

I'm currently constructing a website using ROR, and for the mobile view, I've implemented the mobile_fu gem. The designer provided me with a design for the mobile view that includes various jQuery sliders, players, image sliders, drop-down menus ...

javascriptjqueryjquery-mobilejquery-plugins

Is incorporating CSS advisable in Karma Unit level tests for AngularJS projects?

Imagine your JavaScript code is running some element or position calculations within an AngularJS directive. When testing this JavaScript code, should CSS be included in karma.conf.js? I've noticed that some popular projects have included CSS files. ...

javascriptcssangularjsunit-testingkarma-runner

Guide on using AngularJS UI Router module for filtering JSON data based on a particular object property

I've got a collection of emails stored in a JSON file, each with its own properties: {"id":5,"lu":false,"statut":2,"nom_expediteur":"Brian Patterson","nom_destinataire":"Frank Martin","email_expediteur":"<a href="/cdn-cgi/l/email-protection" class ...

javascriptjsonangularjsfilterangular-ui-router

Finding the ID of the element that was clicked with strict typing

Consider a scenario where we aim to record the ID attribute of a clicked element using the TypeScript code snippet below: onClick(event) { console.log(event.target.attributes.id.nodeValue); } The function above takes the clicked object as an argument, h ...

javascriptjqueryangulartypescript

Different approach to loading Handlebars template instead of using fs.readFile with res.json in Express

In my efforts to create a straightforward live API endpoint (using res.json()) within an Express 4 application that merges Handlebars templates with data and sends back a string for client-side HTML replacement, I've encountered a challenge. The curr ...

javascriptexpresshandlebars.js

Generate unique div elements randomly using jQuery and Javascript to populate a container

My website has a section that spans 100% width and is 450 pixels tall. This is the HTML structure... <section class="interactive-banner"> <figure></figure> </section> I am aiming for each 'figure' element to be 150 ...

javascriptjqueryhtml

Passing values from Vue3 child component to parent component

Hey there, I'm currently diving into the world of Vue and I'm working on a table that dynamically displays abbreviations. I've been trying to send a searchTerm from my child component to the parent component, but I'm struggling with ge ...

javascripthtmlvue.jsvuejs3

What is the best way to iterate through this using forEach?

let array = [{ query:{ q1 : 123, q2 : 44 } }]; Despite attempting to use a forEach loop, no results were returned. ...

javascripthtmlarraysloopsforeach

Tips for Sending a Message Using TypeScript Websockets

I'm currently working on an Angular application that requires subscribing to a websocket to receive incoming data. Within the Angular service, I have the following code snippet: setContextChannel(channel) { this.contextWS = new WebSocket(channel ...

javascriptnode.jsangularwebsocket

Is there a way to override a LESS variable inside a mixin?

Currently, I am incorporating LESS into one of my projects and I have a requirement to establish different color schemes for various users. The project involves developing a portal where the color scheme should change based on the type of user logging in. ...

cssless

Guide on Testing the Fetch Functionality of useEffect Using Jest in React

Can someone assist me with testing my useEffect Fetch using Jest in React? I've been struggling to make it work and tried various solutions without success. This is my first time using Jest, and I'm currently integrating it into my project. Belo ...

javascriptreactjsjestjsreact-testing-library

Using AngularJS to send the $http response back to the calling object

Is there a way to pass the response value to the parent object, specifically the invoker of an http service call in AngularJS? I have a BaseModel that performs the GET request as shown below. The goal is for the basemodel object instance to hold the respon ...

javascriptangularjsangular-promise

extract the field name from the json object

I need to send coordinates to the Google Maps API, but I'm struggling to remove the field name from my JSON object before sending the parameters. Object {TempPoints: "{lat: 51.478,lng: -3.192},{lat: 51.478,lng: -3.192…{lat: 51.47840998047034,lng: - ...

javascriptphpjson