0

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/

2 Answers2

1

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%';
cmac
  • 3,123
  • 6
  • 36
  • 49
  • I put it in the code, but it doesn't change the width of progress bar –  Feb 17 '19 at 13:27
  • Post the section of code that you put and I'll help walk you through it. – cmac Feb 17 '19 at 13:27
  • @MauricioVilla change `let progressBar = document.getElementsByClassName('progressbar');` to `let progressBar = document.getElementsByClassName('progressbar')[0];` – Nick Parsons Feb 17 '19 at 13:53
0
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

TheDev
  • 407
  • 2
  • 12