Buttons within the Bootstrap carousel caption cannot be clicked

I am currently designing a webpage with a Bootstrap carousel that includes a paragraph caption and two buttons. However, the buttons are not functioning as clickable links - when clicked, nothing happens.

{% block body %}

<div id ="car-container">
<div class="container-fluid" style= "padding-right: 0px;
    padding-left: 0px;">



<div id="carousel-home" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
  <div id  = "carousel-inner">

    <div class="carousel-item active">
      <div class = "overlay-background">
    <div class="overlay">
      <img  class="d-block w-100 carousel-home-img" src="empImg1.jpg" alt="First slide">
     
</div>
    </div>
     <div id = "cap_one"  class="carousel-caption ">
     <div id = "cap-head">
    <h5 id ="h5">The People Award</h5>
    </div>
    <p> We have been awarded ‘The People Award’ three years running due to our high levels of customer service.</p>
    
   <a href="{{ path('emp_services_lettings') }}" target="_blank" class="btn btn-primary btn-lg btn-md"   role="button" style = "background-color:  #2b459c!important; color: #FFFFFF!important">Find a property</a>
   <button type="button" class="btn btn-primary btn-lg btn-md" style = "background-color:  #d39e00!important; color: #FFFFFF!important">Valuation</button>
  </div>
    </div>

javascripthtmljquerycsstwitter-bootstrap

Answer №1

To ensure your button is clickable, make sure to include an onclick event like this:

<button type="button" class="btn btn-primary btn-lg btn-md"
style="background-color: #d39e00!important; color: #FFFFFF!important" 
onclick="testMe()">Valuation</button>

In your JavaScript, create a function called testMe() that contains the code you want to execute when the button is clicked.

If you are unsure about the variables used to create the path in your href tag, simply place the path directly like this:

<a href="http://www.google.com" // and the rest of your code

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

Implementing Passport authentication for Steam, transitioning from Express to NestJS

I have embarked on the task of transitioning an express project to nestjs. How can I achieve the same functionality in Nestjs as shown in the working code snippet from Express below? (The code simply redirects to the Steam sign-in page) /* eslint-disable s ...

javascriptexpressnestjspassport.js

Tips for surviving a server restart while using sequelize with a postgres database and handling migrations

Within my express application, I utilize Sequelize for database management. Below is the bootstrap code that I use: db.sequelize .sync({ force: true}) .complete(function(err) { if (err) { throw err[0]; } else { //seed requi ...

javascriptnode.jssqlitepostgresqlsequelize.js

Prevent the button from being enabled until the file input is updated

I want to create a form with an input file for uploading photos, but I need the submit button to be disabled until the input file has a value. Additionally, there are other validations that will also disable the button. Here is the structure of my HTML fi ...

javascripthtmlangularjsbuttonangularjs-ng-disabled

Determine distinct items in an array that match a predefined criteria

I have a list of objects with two keys, img1 and img2. I need to identify unique objects based on the values of img1, while also retaining the corresponding value of img2. This is the current code I am using: const imgs_arr = [ ...new Set( inpu ...

javascriptarraysvue.jsecmascript-6vuejs2

JavaScript is sending a variable to a .php file, which then returns data based on the variable. The information is displayed using JavaScript and AJAX, along with triggers set using the bind('input', function

Currently, I am attempting to create a form that automatically populates some input fields when there is a change. However, I am struggling to understand how to send the #url field to my PHP script. Any insights or suggestions would be greatly appreciated. ...

phpjavascriptajax

How AngularFire automatically adds back a removed item in a Firebase array

I have been working on a way to remove an item from my $firebaseArray called "boxes". Here is the "remove" function: function remove(boxJson) { return boxes.$remove(boxJson); } Although it gets removed, I noticed that it immediately reappea ...

javascriptangularjsfirebaseangularfire

Retrieving information from a Rowdatapacket with expressjs

Is there a way to use a loop to retrieve a single value from each row in RowDataPacket? Currently, my results look like this: [ RowDataPacket { id: 522, number: '111', test: 'testing' }, RowDataPacket { id: 523, number: '112' ...

javascriptnode.jsexpress

NUXT: Module node:fs not found

Encountering an error when running yarn generate in a Kubernetes container during production. The same command works fine locally and was also functioning properly in production up until last week. Error: Cannot find module 'node:fs' Require stac ...

javascriptnode.jsvue.jsnuxt.jsnode.js-fs

Export was not discovered, yet the names are still effective

There seems to be a slight issue that I can't quite figure out at the moment... In my Vue project, I have a file that exports keycodes in two different formats: one for constants (allCodes) and another for Vue (keyCodes): export default { allCodes ...

javascriptvue.jsecmascript-6

Is there a way to accomplish this without using settimeout?

Whenever the Like button is pressed, I want to trigger the loading process I expect to see LOAD_POST_SUCCESS immediately after LIKE_POST_SUCCESS Pressing the Like button should initiate the load process After LIKE_POST_SUCESS, I want to see LOAD_POST_SU ...

javascriptreactjsreact-nativeredux-saga

HTML paired with AJAX response

Currently, I am tackling the situation described below: 1) I have an HTML page labeled A with an input of type text. 2) Upon selection, I trigger an Ajax call to another HTML page, B, in order to retrieve data from a MySQL database. 3) The retrieved dat ...

htmlajax

Blur images on parent div when hovering using javascript

After some extensive searching, I came across a few helpful explanations on how to achieve my desired outcome. By combining them, I was able to get everything working smoothly with the hover effect over the image itself. However, when I attempted to trigge ...

javascripthtmlhoverjquery-isotope

Unable to authenticate with Firebase using ReactJS

I am currently working on developing a basic registration and login system using firebase authentication. However, I am facing an issue where the user appears to be saved when I restart the site in console.log, but the application redirects them back to th ...

javascriptreactjsfirebase

Utilizing ng-route to parse the URL and identify the corresponding controller by its name

I am implementing ng-click and ng-view to navigate my div id= "listings" in order to display various mobile listings including iphone 4, iphone 5, nexus 4, nexus 5, nexus 6, lg g3, and more. You can check out my code on Plunkr. <div ng-repeat = ' ...

javascriptangularjs

Improprove the performance of external banner ads by utilizing asynchronous loading or caching techniques

My website is slick, elegant, and loads quickly - that is until the banner ads come into play! A delay of up to 10 seconds in loading occurs due to waiting for the ads, which is frustrating considering the effort I put into optimizing the rest of the site. ...

phpjqueryhtmlaffiliate

The align-middle Bootstrap class does not seem to be working within the specified div

I want to vertically align text (<span class="align-middle">middle</span>) in the center of a div. Here is the code snippet: <div class="col-4 shadow product-added"> <div class="row"> <div cla ...

htmlcsstwitter-bootstrap

How can we extract word array in Python that works like CryptoJS.enc.Hex.parse(hash)?

Is there a method in Python to convert a hash into a word array similar to how it's done in JavaScript? In JavaScript using CryptoJS, you can achieve this by using: CryptoJS.enc.Hex.parse(hash), which will provide the word array. I've searched ...

javascriptpythonnode.jshmaccryptojs

Issues have been identified with the capabilities of Vue's Mutations and Actions

My Index.js from the Store Folder import Vue from "vue"; import Vuex from "vuex"; import state from "../store/state"; import mutations from "../store/mutations"; import actions from "../store/actions"; Vu ...

javascriptvue.jsvuejs2vuex

Differences in HTML animations can be seen when comparing Google Chrome to Microsoft Edge. Looking for a workaround for autoplay to ensure

My intro video animation is facing recording difficulties due to the autoplay policy in Google Chrome. It seems nearly impossible to capture it accurately. If only autoplay could function for an offline HTML file, my issue would be resolved. Unfortunately ...

javascripthtmlcssgoogle-chromemicrosoft-edge

I am currently working on implementing a feature in my app that allows users to easily log in using their Google account

Currently, I am in the process of enhancing my app to enable users to log in using their Google account. The frontend is built with ReactJS, tailwindcss, and sanity. The login button successfully writes user data to the sanity database. However, I suspect ...

javascriptreactjssanity