You can use HTML tags within a script tag for added flexibility and

I'm working on incorporating this into a dynamic script using data from an XML file (aiming for 50% to be dynamic).

<div class="progress-bar progress-bar-danger" data-progress-animation="50%" data-appear-animation-delay="20">

It currently functions only in Firefox. Any suggestions?

x = xmlDoc.getElementsByTagName("CD");
i = document.getElementById("combobox").selectedIndex;
var z = document.getElementById("combobox1").selectedIndex;
var y = document.getElementById("combobox1").options;
var m = xmlDoc.getElementsByTagName("MFPERS"+y[z].value)[i].childNodes[0].nodeValue;
var str ='<div class="progress-bar progress-bar-danger" data-progress-animation="';
str += m;
str += '%" data-appear-animation-delay="20">';
document.write(str);
javascriptjquerycsshtml

Answer №1

If you assign an id to the progress bar div, you can achieve the desired effect using the following JavaScript function:

let progressBar = document.getElementById('myProgressBar');
progressBar.dataset['progress-animation'] = percent + '%';

It's important to note that using document.write() is generally discouraged.

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

Dynamically include a new prop to the final element within an array of React components

I have been searching everywhere for a solution to this problem, but I can't seem to find one as I am unable to edit the props object. Here's what we are currently doing. We have a menu with subsections and we achieve this by: const firstSectio ...

javascriptreactjs

Preventing Bootstrap Modals from closing or refreshing on page reload

My code contains multiple buttons that trigger the function showModal(title). showModal(title) { this.modalTitle = title this.$bvModal.show("add-modal") } Below is the specific modal being targeted. <b-modal id="add-modal" ...

javascriptvue.jsbootstrap-4bootstrap-modal

Changing the height of tablerows in Material UI v5: A step-by-step guide

I am attempting to adjust the height of the rows in this material-ui code example. import * as React from "react"; import { styled } from "@mui/material/styles"; import Table from "@mui/material/Table"; import ...

javascriptcssreactjsmaterial-ui

cors library returns success messages, not errors

Currently, I am working on implementing the cors package within a node and express environment to validate whether the requesting domain can access my resources. Setting up the validation part following the official documentation was not an issue. However, ...

javascriptnode.jsexpresscors

Tips for effectively organizing a collapsible list

Here is a list that I have: <ul> <li><span class="Collapsable">item 1</span> <ul> <li><span class="Collapsable">item 1.1</span></li> </ul> </ul> I am looking to create ...

javascriptjquery

What is the best way to send a parameter to a mousewheel event?

for (var i = 0; i < 10; i++) { $('#content-scroll' + i).mousewheel(function(event, delta) { if (delta > 0) sliderUp(i - 1); else if (delta < 0) sliderDown(i - 1); return false; // prevent default }); } I am facing an iss ...

javascriptjquery

Problem with the menu button overflowing

I'm exploring the process of designing burger menus for the mobile version of my site. I've successfully created a basic burger menu with some JavaScript assistance, but I encountered an overflow issue. The burger menu functions properly, but the ...

htmlcss

What are some strategies for efficiently positioning buttons using CSS to prevent unwanted consequences?

Below is the CSS and HTML code, detailing a specific issue. * { box-sizing: border-box; font-family: Georgia, 'Times New Roman', Times, serif; } body { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; } .topn ...

htmlcssbutton

Adjust the dropdown width on a bootstrap form to match the size of the textbox

In order to maintain a combined width of 450px, I have two textboxes. One textbox includes a dropdown menu while the other does not. Both textboxes are part of an input group. The dropdown can switch between either textbox at any time. I need the width ...

htmlcssbootstrap-5

Obtain the query response time/duration using react-query

Currently utilizing the useQuery function from react-query. I am interested in determining the duration between when the query was initiated and when it successfully completed. I have been unable to identify this information using the return type or para ...

javascriptreactjstypescripttimereact-query

Is there a way for me to verify that the value I retrieved from my AJAX request was successfully passed to my

The login event will be triggered by this action $('#btnLogin').click(function(){ //var data = $('#loginForm').serialize(); var email = $('#loginEmail').val(); var password = $('#lo ...

phpjqueryajaxcodeigniter

JavaScript Stopwatch Break

Below is the code snippet. How can a button be implemented to pause the timer and then resume it when the resume button is pressed? The // marks indicate where I plan to add my pause and resume functionality. Thank you in advance for your assistance! &l ...

javascripttimer

Adding Array Elements to List Elements

I am facing an issue while trying to display an array of items in a list. The problem is that when I click submit, it adds all the array items to each list item instead of adding one item each time. Here is the link to JSFIDDLE: https://jsfiddle.net/b7Lw ...

javascriptarrays

What is the best way to focus on an object using a particular variable in javascript?

I am currently developing an online game where each user is assigned a unique ID. Below is the client code used to create a new player: const createNewPlayer = (id) => { return player[player.length] = { x:0, y:0, id:id } } The ...

javascriptarrayshtmlobject

Permuting sentences to create intricate anagrams

I am faced with a task of creating the correct phrase for a sentence anagram using an array of nearly 2700 strings. The list consists of almost 100k words that could potentially fit. My goal is to combine these words in groups of 1, 2, and 3 words togethe ...

javascriptnode.jsalgorithmpermutationpermute

Hacking the power of combining Bootstrap 3 with AngularJS to create a unique

Recently, I came across this HTML code snippet that got me thinking: <div class="input-group"> <input type="number" class="form-control" name="distance" ng-model="calculatorData.distance" placeholder="Distancia" required> ...

jqueryangularjstwitter-bootstrap

Tips on saving the background image URL value into a variable

How can I save the URL value of a background image in a variable? For example: image: url(images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg); I store this value as value = images/9XkFhM8tRiuHXZRCKSdm_ny-2.jpg in a variable and then use this variable in an href tag. ...

javascripthtml

I am looking for a way to retrieve the ids of all div elements that have the same x coordinate using document.elementFromPoint in JavaScript. Can someone help me with

Currently, I am facing an issue where I have two divs positioned at the same x coordinate. I am attempting to retrieve the IDs of both divs using document.elementFromPoint(). However, I am only able to receive the ID of one div. var elem = document.elem ...

javascripthtmlcssangularjsreactjs

Tips for properly halting an AJAX request

My challenge is to halt an Ajax request when a user clicks a button. Despite using .abort(), the Ajax request continues to occur every 2 seconds. Essentially, the user waits for a response from the server. If the response is 2, then an Ajax request should ...

javascriptphpjqueryajax

Issue with firestore IN query when encountering NULL value

Is there a way to create a query that retrieves all documents without a value, whether it be null or ''? Within my table are three documents, each containing a field called a. https://i.sstatic.net/FGV0Z.png During an IN query, the document wit ...

javascriptfirebasegoogle-cloud-platformgoogle-cloud-firestore