0

this is going to be very basic question. What I'm trying to do is to have simple progress bar and a way to receive number from the user. Then I want my code to start when user clicks the button and display the data on the bar.

My js code: 

var moveBar = function() {
var addPoints = prompt("Select amount:"); // Prompt and ask user for input
var bars = document.getElementsByClassName("progress-bar");
bars[0].style.width = '"' + parseInt(addPoints) + "%"  + '"' ;
//console.log('"' + parseInt(addPoints) + "%"  + '"'); // Added for testing. Displays correct value, but code doesn't work.
}

My HTML code:

<div class="progress">
  <div id="prog" class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
    60%
  </div>
</div>

<input type="button" id="progbar" value="Test" onclick="moveBar()"></input>

The code works fine as long as I use predefined value like here

bars[0].style.width = "50%";

What needs to be changed in order for it to work ?

Siguza
  • 21,155
  • 6
  • 52
  • 89
KoKsMAN
  • 59
  • 1
  • 10

1 Answers1

0

You are adding quotes to the width which is wrong.
You should add the value without the quotes.

Note that you are changing the width of the div. In order to see the current progress you could add some background color to the div with id prog.

var moveBar = function() {
    var addPoints = prompt("Select amount:");
    // Prompt and ask user for input
    var bars = document.getElementsByClassName("progress-bar");
    bars[0].style.width = parseInt(addPoints) + "%";
    //console.log(parseInt(addPoints) + "%"); // Added for testing. Displays correct value, but code doesn't work.
}
aleksandar
  • 2,399
  • 2
  • 14
  • 22
  • Yes, that worked. Thank you ! I still don't understand why quotes break the code in my particular example, but they are fine in this one: bars[0].style.width = "50%"; – KoKsMAN Jul 01 '15 at 09:20
  • Its ok because you are hardcoding it (you entered it manually and it is considered as string). – aleksandar Jul 01 '15 at 15:52