Is there an easier method to assign text to a modal-body using a specific classname?

Utilizing Bootstrap 5.1.3 alongside Pure Vanilla JavaScript, I have successfully been able to populate the .modal-body with content using the following code:

function showBSModal(modalid, inputid) {
    var myModal = new bootstrap.Modal(document.getElementById(modalid), {});
    var theValue = document.getElementById(inputid).value;
    const parent = document.getElementById(modalid);
    parent.querySelector(".modal-body").innerHTML = "Successfully Delete Uesr with ID: " + theValue;
    myModal.show();
};

In this function, I dynamically pass the modalid and the id of my input box (inputid) to achieve the desired output.

https://i.sstatic.net/LQisD.jpg

I attempted to use myModal.querySelector instead of parent.querySelector, but it did not work since myModal.querySelector is not recognized by the browser.

Question: Is there a more efficient method to accomplish the above task?

javascriptbootstrap-5bootstrap5-modal

Answer №1

myModal is actually a modal object, not an HTML element. To properly work with HTML elements, we should load the element, assign it to a variable, and use that instead.

function displayModal(modalId, inputId) {
    let element = document.getElementById(modalId);
    var myModal = new bootstrap.Modal(element, {});
    var value = document.getElementById(inputId).value;
    element.querySelector(".modal-body").innerHTML = "User ID: " + value;
    myModal.show();
};

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

The ConsoleCapture does not capture every console error for Sentry

Running into an issue capturing console errors with Sentry in a Next.js app. The problem arises from an error within a library that is inaccessible to us, specifically related to WebSocket "WebSocket is already in CLOSING or CLOSED state" This error is c ...

javascriptwebsocketerror-handlingnext.jssentry

Challenges with jQuery Image Sliders

Currently, I am learning from a tutorial on creating a custom jQuery content slider and you can find the tutorial here. Everything is working smoothly in terms of creating the image slider. However, I am facing an issue where I want to have the 'Next ...

phpjavascriptjqueryhtmlcss

Is there a way to grab the inner content of an e-mail link by right-clicking on it?

I am currently developing a Chrome Extension that functions similarly to the "Search on Google" feature when you right-click on selected text. However, I am facing an issue with making it work when right-clicking on a mailto: email link. How can I extract ...

javascript

Various JSON Tag values occurring more than once

Upon receiving a JSON Object in HTML, I am passing it to a JavaScript function defined below. The issue arises when the same folderName appears repeatedly on the HTML page. JSON Object: { "folderName": "arjunram-test", "objects": [ { ...

javascripthtmljson

How can I retrieve the name of an HTTP status code using JavaScript and AngularJS?

My web application is built using AngularJS, JS, JQ, HTML5, and CSS3. It interacts with our projects' REST API by sending various HTTP methods and manipulating the data received. The functionality is similar to what can be achieved with DHC by Restlet ...

javascriptangularjshttpdhc

How to resolve the error of "Cannot GET /api/courses/1"

const express = require('express'); const app = express(); app.get('/',(req,res) =>{ // viewable at localhost:3000 res.send('hello world'); }); app.get('/api/courses',(req,res) =>{ // shown on ...

javascriptnode.jsexpressnpmnodemon

`an error occurs when trying to loop through an object and add a key``

I'm currently facing an issue with adding a key to an object through looping. Here is the code snippet: function checkResult(want, reference) { const keys = Object.keys(reference); for(let i=0; i<Object.keys(reference).length; i++){ console ...

javascriptnode.jsarraysjsonobject

Challenges with Tab navigation in React and Ionic 5

I am facing a challenge with getting the tabs navigation to function correctly. Here is my current code: App.tsx: const App: React.FC = () => <IonApp> <IonReactRouter> <IonRouterOutlet id="main"> < ...

javascriptreactjsionic-frameworkionic5

When using node.js with MySQL, the insert statement with a WHERE clause does not execute properly

Snippet: function setValue(currentVal) { idOutput = currentVal; encodedVal = Base.encode(idOutput); var baseInsert = {ShortUrlCode: encodedVal}; console.log(idOutput); console.log(encodedVal); con.q ...

javascriptmysqlnode.jsamazon-web-servicesnpm

What steps can I take to address this issue with my express node and ejs?

Hey there, I'm new to node.js and I've been encountering this error message. Can someone please provide some insight? Error: Could not find matching close tag for "<%=". at /Users//Desktop/Web Development/getting_started_express js/node_m ...

javascriptnode.jsexpress

Can you explain the process of utilizing WebdriverIO (wdio) to determine the frequency of an element's occurrence?

Currently, I am working on creating an interaction test to validate my javascript code using WebdriverIO (wdio). The specific functionality I am looking to test involves deleting a node and verifying that the number of times a selector appears has decreas ...

javascriptselenium-webdriverwebdriver-io

CSS switch status toggle

Here's my code for a toggle switch from . I'm trying to change the label before the switch/checkbox to display "checked" or "not checked" based on the toggle state. When I click on the label, it changes the switch but not the text. JavaScript: ...

javascriptjqueryhtmlcss

Replacing values in an HTML file with MySql query results

----- Problem solved, solution below ----- In my HTML file, I have a dropdown menu for various courses listed as follows: <ul> <li class="dropbtn" id="1"> <a href="">first</a> <ul class="dropdown-content"> ...

javascriptphphtmlmysqlajax

Issue with visibility of pagination in AngularJS ui

I am facing an issue with pagination in my AngularJS UI application. I have a dataset that requires server-driven pagination due to its size. The problem I'm encountering is that the pagination element is not displaying on the page, even though I hav ...

javascriptangularjsangular-uiangular-ui-bootstrap

Tips for implementing server-side pagination with Angular-UI Bootstrap by utilizing the skip parameter

i have a number of items generated using ng-repeat, i have to implement pagination.but everywhere i can see by getting the count value of items, i can add. but i am struggling with implementing skip functionality. For example, if the skip value is set to 1 ...

javascriptangularjspaginationangular-ui-bootstrap

Exploring jasmine testing with ajax requests

I've been working on writing Jasmine unit tests for a JavaScript file that includes an Ajax call. I'm unsure how to properly test the 'Success' function using Jasmine. Here's a snippet of the code: function getGroups(){ var defe ...

javascriptajaxkarma-jasmine

No testing detected, ending with code zero - NPM and YARN

After installing node js and yarn, I attempted to run an application/script developed by someone else. However, when running the test, I encountered the following message: No tests found, exiting with code 0 Watch Usage › Press f to run only failed tes ...

javascriptnode.jsnpmpackageyarnpkg

Can you share the outcomes of executing a Node.js program in real-time?

Is there a method to execute a program (such as tcpdump) and have nodejs capture the console output in real-time to display in an HTML format without saving it? I am interested in running a program that displays information in the console, with the capabi ...

javascripthtmlnode.jsbashshell

Store the current function in the cache, incorporate new features, and execute those additions upon calling another function

I have a pre-existing function that I am unable to directly access or modify. Due to this limitation, I have resorted to caching the function and incorporating additional functions alongside it. This function loads periodically, sometimes occurring on pag ...

javascriptjquery

Having trouble making the JavaScript mouseenter function work properly?

Hi there, I'm having trouble with this code and I can't figure out why it's not working. $('#thumbs > li').mouseenter(function() { $(this).find("div").fadeIn(); }).mouseleave(function(){ $(this).find("div").fadeOut(); ...

javascriptcss