Bootstrap：进度条和接收用户数据

Question

这将是一个非常基本的问题。我想要做的是拥有简单的进度条和一种从用户那里接收号码的方法。然后我希望我的代码在用户单击按钮并在栏上显示数据时启动。

我的js代码：

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

我的HTML代码：

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

只要我使用像这里这样的预定义值，代码就可以正常工作

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

需要更改什么才能使其正常工作？

Answer 1

您在错误的宽度上添加了引号。
您应该添加不带引号的值。

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

Bootstrap：进度条和接收用户数据

Bootstrap: Progress bar and receiving data from the user

javascript

twitter-bootstrap

progress-bar