Issue with the functionality of Bootstrap 5 dismissable alert needs to be addressed

I encountered an issue with the alert in my html code:

<div class="alert alert-success alert-dismissible fade show d-flex align-items-center justify-content-center" id="alert" style="display:none;">
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
    <span id="msg">Success</span>
</div>

The intention was to have the alert hidden initially and then display a danger alert upon clicking the submit button in my script using this piece of js:

document.getElementById("submit").addEventListener("click",function(){
     document.getElementById("alert").className="alert alert-danger alert-dismissible fade show d-flex align-items-center justify-content-center";
     document.getElementById("msg").innerHTML="Danger";
     document.getElementById("alert").style.display="block";
})

However, when running the code, the alert remains visible from the start. Additionally, upon clicking the submit button, I encounter the following error message:

Uncaught TypeError: Cannot set properties of null (setting 'className')

I am seeking assistance in understanding why this is happening. Any help would be greatly appreciated.

javascriptbootstrap-5

Answer №1

Is using the !important flag in CSS effective for hiding elements?

Here is how I managed to make it work perfectly:

<div class="alert alert-success alert-dismissible fade show d-flex align-items-center justify-content-center" id="alert" style="display:none !important;">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <span id="msg">Success</span>
    </div>

    <input type="submit" id="submit" value="click me">

    <script>
        document.getElementById("submit").addEventListener("click", function () {
            document.getElementById("alert").className = "alert alert-danger alert-dismissible fade show d-flex align-items-center justify-content-center";
            document.getElementById("msg").innerHTML = "Danger";
            document.getElementById("alert").style.display = "block";
        });
    </script>

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

jQuery AJAX Concurrent Event

I have encountered a problem similar to ones discussed on SO, but none exactly match my specific issue. Here's the situation: var x = 5; if( some condition ){ $.ajax({ url:"...", success: function(response){ x = respo ...

javascriptjqueryajax

Utilizing the same uuid twice along with Vuex and the unique identifier generation tool uuidv4

Within my vuex store, there is a function to create a post. This function generates a json Object containing a unique uuid using uuidv4(). However, I have noticed that if I execute the function multiple times, the uuid remains the same each time (unless I ...

javascriptvue.jsvuejs2vuexuuid

The Ultimate Guide to Initializing Variables in UI Router State Access

In my application, I have defined 2 states. One is "tickets" which matches /tickets ... $stateProvider // defines the states of my application .state("tickets", { // assigns properties to each state url: "/tickets", // route templateUrl: "m ...

javascriptangularjsangular-ui-router

How can I adjust the timeout or enhance my code for Excel Online's ExcelScript error regarding the Range getColumn function timing out?

I am struggling with a code that is supposed to scan through the "hello" sheet and remove any columns where the top cell contains the letter B: function main(workbook: ExcelScript.Workbook) { let ws = workbook.getWorksheet("hello"); let usedrange = ws ...

javascriptexceltypescripttimeoutoffice-scripts

PDFMAKE: A Guide to Duplicating Elements in the 'Content' Array

I have an Array within Items. My goal is to display them in a Table format using PDFMake. table: { multiple pages headerRows: 2, widths: ['auto', 100, 200, 'auto', 'auto', 'auto'], body: [ ...

javascripthtmlangularjsarrayspdfmake

Using Page.ResolveClientUrl in JavaScript or jQuery allows for easy resolution of client

I find myself in a predicament where I need to choose between using an HTML page instead of a .aspx page for performance reasons. Currently, I am using an aspx page solely because of the CSS and javascript file paths like: <script type="text/javascript ...

javascriptjqueryhtmlasp.net

Using Plotly.js within a deleted Vue.js component may result in displaying an incorrect chart

Issue I am facing a problem with deleting one of the components that contains a chart. Even after deleting the component, the chart remains visible. To see an example, check out this jsfiddle: https://jsfiddle.net/m4ywp5fc/4/ Solution Attempted I attem ...

javascriptvue.jsplotly

Random sequencing of the commands

Whenever I call the Details function, it returns empty details because the function executes before retrieving data from the json file. What is the best way to fix this issue? app.controller('loginCtrl',function($scope,login){ $scope.user=login ...

javascriptangularjs

What steps can be taken to troubleshoot and resolve this specific TypeScript compilation error, as well as similar errors that may

I am struggling with this TypeScript code that contains comments and seems a bit messy: function getPlacesToStopExchange(): { our: { i: number; val: number; }[]; enemy: { i: number; val: number; }[]; //[party in 'our' | 'enemy' ]: ...

javascripttypescriptdebuggingcompiler-errorstsc

The Countdown Timer in React Native triggers an error due to Invariant Violation

According to some expert advice from this stackoverflow answer, I attempted to implement a countdown timer for my project as shown below. constructor(props: Object) { super(props); this.state ={ timer: 3,hideTimer:false} } componentDidMount(){ this. ...

javascriptreact-native

What is the best way to handle a select input that may have varying options in

I'm struggling to figure out how to make each select input independent of each other when rendering them through a map function. How can I correctly implement this, especially considering that the data will be coming from a redux store in the future? ...

javascriptreactjsreduxmaterial-ui

Sending colored output from stdout to grunt's output stream

Having trouble creating a custom grunt task that runs mocha tests and displays colored output? I'm running into an issue where grunt is stripping out the colors from the mocha command's output. Here's the code for the grunt task: var exec = ...

javascriptnode.jsgruntjs

Guide on showcasing an array in a table using DataTables in a single column

I find myself in a difficult situation because I am using DataTables for pagination and searching in an unconventional way. I have a table where I display vendor details such as names, emails, addresses, countries, and the materials they deal with. To fetc ...

javascriptphparraysajaxdatatables-1.10

Saving real-time information to MongoDB with Node.js

What is the best way to use JSON.stringify and send it to my mongoDB Database? For instance: import express from 'express'; let data_record = JSON.stringify({**any content**}) This snippet of code will automatically fetch data every 60 second ...

javascriptjsonnode.jsmongodbexpress

Submitting an HTML form to trigger a PHP function through AJAX

I am currently working on a task that involves POSTing an email address entered in an HTML form to a PHP script for storage in a database. The script should also handle error messages if the user inputs an invalid email address. I want to make this process ...

phpjavascripthtmlajaxforms

How to implement Google Tag Manager using the next/script component in Next.js 11?

Version 11 of Next.js recently introduced a new approach with the Script component offering various strategies. To avoid duplicate tags, it is advised to implement Google TagManager using the afterInteractive strategy. In my experimentation: // _app.js ...

javascriptnext.jsgoogle-tag-manager

experiencing a problem with the older version 1.5 of the swfobject.js software

Hello there! I am encountering an issue with swfobject.js version 1.5 specifically in IE7 and IE8. My chart is not displaying in these web browsers, but it works perfectly fine on Chrome, Firefox, and even IE 6. Do you have any suggestions on how to resolv ...

javascriptasp-classic

Error message: "jQuery is not defined and occurs exclusively in Chrome."

I've been using the following code to asynchronously load my JavaScript in the head section: <script type='text/javascript'> // Add a script element as a child of the body function downloadJSAtOnload() { var element4= document.creat ...

javascriptjquerygoogle-chromeasynchronous

Guide on creating an autonomous select-all checkbox to show table columns

How can I create checkboxes with a "Select all" option and the following functionality: Check one or more checkboxes to show specific table columns. Uncheck them to hide the columns (toggle). Select the "Select all" checkbox to display all table columns. ...

javascriptjqueryhtmlcheckboxhtml-table

The justify-content-sm-center behavior in Bootstrap seems to be malfunctioning

I am facing an issue with justify-content-sm-center in Bootstrap 5. It is not functioning as intended when trying to center a specific div on smaller screens (below 578px). I have applied the justify-content-sm-center class to the div, but it does not work ...

cssbootstrap-5