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

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

请注意，您正在更改div的宽度。为了看到当前进度您可以为id prog 的div添加一些背景颜色。

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：进度条并从用户

1 个答案: