Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Question

Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Currently, I am facing a challenge in dynamically adjusting the width value for a <div> element serving as a coloured bar within an HTML template used for PDF generation. While I can successfully set other values using something like {{my_value}}, applying a similar approach to style attributes does not yield the desired outcome.

My attempts have included using width: {{my_value}}% and assigning a class to the div with a specified width i.e.

.divClass { "width": {{my_value}} }

The HTML template snippet is shown below:

<!-- Dynamically update width based on {{my_value}} -->
<div style="width: 45% !important;">
<!-- Dynamic percentage displayed inside and beside -->
<div style="padding-left:8px;">{{my_value}}%</div>
</div>

Within the JavaScript file, we have the following code segment:

// Retrieve the value from POST request
var val1 = req.body.val1;

//substitute the value in the template
templateHtml = templateHtml.replace('{{my_value}}', val1);

In essence, if the POST val1 = 20%, my goal is to ensure that the coloured bar <div> reflects only 20% of its total width while also displaying the corresponding percentage. However, at present, although I can display the percentage on the bar, it ends up filling the entire width with color instead.

html css node.js express

Answer 1

Answer №1

If the server response includes a percentage value, let's say percentage, you can adjust the size using JavaScript like this:

To change the size of a <div> element in a JS file, use:

document.getElementById("myDiv").style.width = '50px';

Here is a simple example:

document.getElementById("updateLoadBar").onclick = function() {
    updateLoadingBar()
};

function updateLoadingBar() {
    // Get input value
    // Assuming you retrieve the value from your template as follows:
    // width = {{ percentage }};
    var width = document.getElementById("input-number").value;
    // Set darkBlue width
    document.getElementById("myBar").style.width = width + '%';

    // Preventing text overlap
    if (width >= 5) {
        // set text
        document.getElementById("text").textContent = width + "%";
    }
}

.myButton {
  border-radius: 5px;
}

#myProgress {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background-color: lightblue;
}

#myBar {
  width: 1%;
  height: 100%;
  background-color: darkblue;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Select a number between 0 and 100:
<input id="input-number" type="number">
<input id="updateLoadBar" type="button" value="Update load bar" class="myButton">


<div id="myProgress">
  <div id="myBar">
    <div id="text">
    </div>
  </div>
</div>

You can explore ready-to-use examples on pure JS or bootstrap documentation if you are utilizing bootstrap in your project. Hopefully, this information is beneficial.

Answer 2

If the server response includes a percentage value, let's say percentage, you can adjust the size using JavaScript like this:

To change the size of a <div> element in a JS file, use:

document.getElementById("myDiv").style.width = '50px';

Here is a simple example:

document.getElementById("updateLoadBar").onclick = function() {
    updateLoadingBar()
};

function updateLoadingBar() {
    // Get input value
    // Assuming you retrieve the value from your template as follows:
    // width = {{ percentage }};
    var width = document.getElementById("input-number").value;
    // Set darkBlue width
    document.getElementById("myBar").style.width = width + '%';

    // Preventing text overlap
    if (width >= 5) {
        // set text
        document.getElementById("text").textContent = width + "%";
    }
}

.myButton {
  border-radius: 5px;
}

#myProgress {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background-color: lightblue;
}

#myBar {
  width: 1%;
  height: 100%;
  background-color: darkblue;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

Select a number between 0 and 100:
<input id="input-number" type="number">
<input id="updateLoadBar" type="button" value="Update load bar" class="myButton">


<div id="myProgress">
  <div id="myBar">
    <div id="text">
    </div>
  </div>
</div>

You can explore ready-to-use examples on pure JS or bootstrap documentation if you are utilizing bootstrap in your project. Hopefully, this information is beneficial.

Tips for modifying the "width" of a style within an HTML template implemented in a NodeJs express application

Answer №1

Similar questions

CSS3 variables causing issues

How come my directive is being updated when there are changes in a different instance of the same directive?

What is the best way to assign attributes to multiple HTML elements using an array?

The unzipper will disregard any empty directories within the file

The issue with Internet Explorer failing to adhere to the restrictions set on maximum width and

Every time I attempt to utilize React BrowserRouter, I inevitably run into an error

How can I toggle the visibility of a div based on whether a variable is defined or not?

What is the process for retrieving User Information using AngularJS following NodeJS authentication?

Box Pattern with Pop-Up Modal

Extracting values from an *ngFor loop in Angular 8 - Here's how to do

Access not granted while utilizing Yeoman for scaffolding an application

Hide object scroll percentage with CSS styling

Incorporate CSS and JavaScript files into every page of NetSuite

swap out a method within a publicly available npm module

I'm experiencing an issue with my Next.js Airbnb-inspired platform where I am unable to save a listing to my favorites

What causes RangeError: Maximum call stack size exceeded when Element UI event handlers are triggered?

Every time I click once, two unnecessary AJAX calls are triggered, and the DOM remains outdated until I manually refresh the page

Ensuring that environment variables are properly set is essential for effective error handling

The rollup-plugin-typescript is unable to identify the 'lib' option within the 'compilerOptions'

Node application on OpenShift encountering an error: Unable to locate version `ZLIB_1.2.9' of /lib64/libz.so.1