CODEWITHSUNDEEP
javascriptcss
user8880106
user8880106

Reputation:

Get value from JS to CSS like a progress bar

I tried to create a progress bar of a new page Im developing (you can chart your fav songs based on your preference)

The value that gives the width is

+Math.floor(finishSize*100/totalSize)+

But I haven't been able to put that into CSS. Or at least put it into style="". I've been looking for a tutorial but nothing has worked for me.

Here is my JSFiddle

https://jsfiddle.net/h78jp4qo/

Upvotes: 0

Views: 216

Answers (2)

cmac
cmac

Reputation: 3268

Something like this:

// Get your progress bar element
let progressBar = document.getElementsByClassName('progressbar');
// update the style width
progressBar[0].style.width = Math.floor(finishSize*100/totalSize)+'%';

In your fiddle, Math.floor(finishSize*100/totalSize)+'%' is evaluating to zero, so the bar isn't showing, that's whole other issue, but you can add this at the end of your showImage function to see that it will update your progress bar:

// Get your progress bar element
let progressBar = document.getElementsByClassName('progressbar');
// update the style width
progressBar[0].style.width = Math.floor(finishSize * 100 / totalSize) + '%';
progressBar[0].style.width = '33%';

Upvotes: 1

TheDev
TheDev

Reputation: 415

let progressbar = document.querySelector('.progressbar');
progressBar.style.width = Math.floor(finishSize*100/totalSize)+'%';

First of all you neet select what you want change, in this case the class progressbar, after you can use element.style.width = SIZE to select a element you can use querySelector if you are sure that will get only the first element or getElementByClassName for get a array off elements

Here a explain about js selector element

querySelector document

getElementByClassName document

Upvotes: 0

Related Questions