Bootstrap: Progress bar and receiving data from the user

问题

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 ?

回答1:

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.
}

来源：https://stackoverflow.com/questions/31150634/bootstrap-progress-bar-and-receiving-data-from-the-user

标签

javascript

twitter-bootstrap

progress-bar